CSS3 Media Query CSS3媒介查询

通过min-width的设置，我们可以在浏览器窗口或设备屏幕宽度高于这个值的情况下，为页面指定一个特定的样式表;max-width则反之

如下面代码：

<style>
			/* max-width 宽度小于 600px*/
			@media screen and (max-width:600px){
				.one{background:#F9C;}
				span.lt600{display:inline-block;}
			}
			/* min-width 宽度大于 900px*/
			@media screen and (min-width:900px){
				.two{background:#F90;}
				span.gt900{display:inline-block;}
			}
			/* min-width & max-width 宽度在 600px 到 900px 之间*/
			@media screen and (min-width:600px) and (max-width:900px){
				.three{background:#9CF;}
				span.bt600-900{display: inline-block;}
			}
			/* max device width 设备最大宽度为 480px*/
			@media screen and (max-device-width:480px){
				.iphone{background:#ccc;}
			}
</style>

 有些时候，我们希望通过media queries作用于某种特定的设备，而忽略其上运行的浏览器是否由于没有最大化而在尺寸上与设备屏幕尺寸产生不一致的情况。这时，我们需要使用min-device-width与max-device-width，用来判断设备本身的屏幕尺寸。

代码如下：

@media screen and (max-device-width: 480px) {  
	.classForiPhoneDisplay {  
		font-size: 1.2em;  
	}  
} 

@media screen and (min-device-width: 768px) {  
	.minimumiPadWidth {  
		clear: both;  
		margin-bottom: 2px solid #ccc;  
	}  
}

iPhone4

   <link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />

上面的样式是专门针对iPhone4的移动设备写的。

iPad

  <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" /> 

  <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"  type="text/css" />

在大数情况下，移动设备iPad上的Safari和在iPhone上的是相同的，只是他们不同之处是iPad声明了不同的方向，比如说 上面的例子，在纵向(portrait)时采用portrait.css来渲染页面；

在横向（landscape）时采用landscape.css来渲 染页面。

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手机的页面重构问题。