标签：
1. 响应式web设计
（1）.媒体查询初探 通过media属性为样式表指定了设备类型
<link rel="stylesheet" media="screen" href="style.css" />
CSS3 增加当设备纵向放置的时候才匹配的条件
<link rel="stylesheet" media="screen and (orientation:portrait)" href="style.css" />
CSS3 增加当设备屏幕大雨960px才会加载style.css样式文件的条件
<link rel="stylesheet" media="screen and (orientation:portrait)" href="style.css" />
参考CSS3媒体查询：http://www.w3.org/html/ig/zh/wiki/CSS3媒体查询
- width 视口宽度
- height 视口高度
- device-width 设备屏幕的宽度
- device-height 设备屏幕的高度
- orientation 检测屏幕处于横屏还是竖屏
- aspect-ratio 基于视口的宽高比例
- device-aspect-ratio 基于设备屏幕的宽高比
- color 颜色的位数，如min-color：32 匹配设备是否有32位或以上的颜色
- color-index 设备的颜色索引表中的颜色数
- monochrome 检测单色振缓冲区中每像素使用的位数。为非负数，如monochrome：3
- resolution 检测屏幕或打印机的分辨率，如min-resolution：300dpi(dpi后面会介绍)，也可以是每厘米像素点的度量值，如min-resolution：120dpcm
- scan 扫描方式，值为progressive（逐行扫描）、interlace（隔行扫描）
- grid 检测输出设备是网格设备还是位图设备
创建媒体查询时，上述特性(scan和grid不行)都可加上min和max前缀创建媒体查询的范围。除了
资料来源：
http://sc.chinaz.com/info/130410113358.htm
标签：
原文地址：http://www.cnblogs.com/bonnie-lbn/p/4846930.html
