css3----MediaQueries的相关样式

1.MediaQueries模块允许添加媒体查询表达式，用以指定媒体类型，然后根据媒体类型来选择应该使用的样式，即在不改变内容的情况下在样式中选择一种页面的布局以精确的适应不同的设备，从而改善用户体验

2.@media 设备类型 and (设备特性) {样式代码}

设备类型：

设备类型的值	对应的设备类型
all	所有设备
screen	电脑显示器
print	打印用纸或打印预览
handhelp	便携设备
tv	电视机类型的设备
speech	语音和音频合成器
braille	盲人用点字法触觉回馈设备
embossed	盲文打印机
projection	各种投影设备
tty	使用固定密度字母栅格的媒介，例如电传打字机和终端

设备特性：

特性	可指定的值	是否允许使用min/max前缀	特性说明
width	带单位的长度数值	允许	浏览器窗口的宽度
height	带单位的长度数值	允许	浏览器窗口的高度
device-width	带单位的长度数值	允许	设备屏幕分辨率的宽度
device-height	带单位的长度数值	允许	设备屏幕分辨率的高度
orientation	portrait/landscape	不允许	浏览器窗口的方向是横向还是纵向，当高度大于宽度时是protrait
aspect-ratio	比例值	允许	浏览器窗口的纵横比，比例值为浏览器窗口的宽度/高度
device-aspect-ratio	比例值	允许	屏幕分辨率的纵横比，比例值为浏览器窗口的宽度/高度
color	整数值	允许	设备使用多少位的颜色值，如果不是彩色，color:0
color-index	整数值	允许	色彩表中的色彩数
monochrome	整数值	允许	单色帧缓冲器中每像素的字节数
resolution	分辨率值，例如300dpi	允许	设备的分辨率
scan	progressive/interlace	不允许	progressive是逐行扫描，interlace是隔行扫描
grid	0/1	不允许	设备是基于栅格还是基于位图，栅格是1，位图是0

3. 例子：窗口宽度1000px以上

@media screen and (min-width:1000px){
    .box{
        width:100px;
        height:400px;
    }
}

 

　　窗口宽度在640px以上，999px以下

@media screen and (min-width:1000px) and (max-width:999px){
    .box{/*.....*/
    }
}

4, 在表达式中加上not关键字，对后面的表达式执行取反操作

@media not screen and (color){/*该样式将被应用到便携设备以外的其他设备或者非彩色的便携设备上*/
    .box{/*.....*/
    }
}

 

5, iphone的分辨率是320px*480px，但是在iphone使用的safari在进行页面显示时将窗口宽度作为980px显示，因此即使写好了针对iphone的样式也不会使用，而会使用980px的样式，

因此利用<meta>标签在页面中指定safari浏览器按照多少像素的窗口宽度来进行显示

<!--按照600px选择样式显示-->
<meta name="viewport" content="width=600px"/>