Media Query不同设备例子

iPhone4

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

上面的样式是专门针对iPhone4的移动设备写的。iPhone4分辨率：320px *480px,iPhone使用Safari浏览器进行页面显示窗口宽度为980px，可以利用标签在页面中指定safari浏览器在处理本页时按照多少像素窗口宽度来进行：

<meta name="viewport" content="width=600px"><meta>

 

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" />