常用的CSS media Query

常见的Media Queries的具体使用方式

一、最大宽度Max Width

<link rel="stylesheet" media="screen and (max-width:600px)" href="small.css" type="text/css" />

上面表示的是：当屏幕小于或等于600px时，将采用small.css样式来渲染Web页面。

二、最小宽度Min Width

<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css"  />

上面表示的是：当屏幕大于或等于900px时，将采用big.css样式来渲染Web页面。

三、多个Media Queries使用

<link rel="stylesheet" media="screen and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />

Media Query可以结合多个媒体结构，换句话说，一个Media Query可以包含0到多个表达式，表达式又可以包含0到多个关键字， 以及一种Media Type。如上述所示屏幕在600-900px之间采用style.css样式来渲染Web页面。

四、设备屏幕的输出宽度Device Width。

<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" type="text/css" />

上面的代码指的是iphone.css样式适用于最大设备宽度为480px，比如说iPhone上的显示，这里的max-device-width所指的是设备的实际分辨率，也就是指可视面积分辨率

五、android

/*240px的宽度*/

<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />

/*360px的宽度*/

<link rel="stylesheet" media="only screen and (min-device-width:241px) and (max-device-width:360px)" href="android360.css" type="text/css" />

/*480px的宽度*/

<link rel="stylesheet" media="only screen and (min-device-width:361px) and (max-device-width:480px)" href="android480.css" type="text/css" />

我们可以使用media query为android手机在不同分辨率提供特定样式，这样就可以解决屏幕分辨率的不同给android手机的页面重构问题。

六、not关键字

<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />

not关键字是用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备。

七、only关键字

<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="android240.css" type="text/css" />