CSS3媒体查询(Media Queries)与移动设备显示尺寸大全

最近在做公司官网，需要适配移动端，于是结合自己以前总结的知识，以及在网上找到的相关资料供大家参考。

举个栗子：

 <link rel="stylesheet" media="screen and (max-width: 375px)" href="solution_schoolNet.css" />

此media属性值的意思是：当页页宽度小于或等于600px,就调用solution_schoolNet.css样式表来渲染页面。

media的语句中包含的内容：

1、screen：这个不用说大家都知道，指的是一种媒体类型；
2、and：被称为关键词，与其相似的还有not,only，稍后会介绍；
3、(max-width:600px)：这个就是媒体特性，说得通俗一点就是媒体条件。

用css来表示：

  @media screen and (max-width: 375px) {
    div {
      width:100%
    }
  }

常用媒体查询如下表所示：

下面我们一起来看看Media Queries的具体使用方式：

一、最大宽度Max Width

  <link rel="stylesheet" media="screen and (max-width:375px)" href="solution_schoolNet.css"/>

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

二、最小宽度Min Width

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

三、多个Media Queries使用

 <link rel="stylesheet" media="screen and (min-width:414px) and (max-width:736px)" href="solution_wifi.css"/>

Media Query可以结合多个媒体查询，换句话说，一个Media Query可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种Media Type。正如上面的其表示的是当屏幕在414px-736px之间时（6s plus）采用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所指的是设备的实际分辨率，也就是指可视面积分辨率

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

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

only用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。

其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。

其主要有：支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会不读了样式，因为其先读only而不是screen；另外不支持Media Qqueries的浏览器，不论是否支持only，样式都不会被采用。

十、其他

在Media Query中如果没有明确指定Media Type，那么其默认为all，如：

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

其他方面：

-webkit-min-device-pixel-ratio为1.0：

1.所有非Retina的Mac
2.所有非Retina的iOS设备
3.Acer Iconia A500
4.Samsung Galaxy Tab 10.1
5.Samsung Galaxy S

-webkit-min-device-pixel-ratio为1.3：

1. Google Nexus 7

-webkit-min-device-pixel-ratio为1.5：

1.Google Nexus S
2.Samsung Galaxy S II
3.HTC Desire
4.HTC Desire HD
5.HTC Incredible S
6.HTC Velocity
7.HTC Sensation

-webkit-min-device-pixel-ratio为2.0：

1.iPhone 4
2.iPhone 4S
3.iPhone 5
4.iPad (3rd generation)
5.iPad 4
6.所有Retina displays 的MAC
7.Google Galaxy Nexus
8.Google Nexus 4
9.Google Nexus 10
10.Samsung Galaxy S III
11.Samsung Galaxy Note II
12.Sony Xperia S
13.HTC One X

device-aspect-ratio

语法：device-aspect-ratio：<ratio>
取值：<ratio>：指定比率
说明：定义输出设备的屏幕可见宽度与高度的比率。

如常讲的显示器屏幕比率：4/3, 16/9, 16/10
本特性接受min和max前缀，因此可以派生出min-device-aspect-ratio和max-device-aspect-ratio两个媒体特性。

一般例子：

@media screen and (device-aspect-ratio:4/3){ … }
@import url(example.css) screen and (min-device-aspect-ratio:4/3);

版本支持：IE9以及以上的浏览器开始支持

例子：

<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>media features device-aspect-ratio_CSS参考手册_web前端开发参考手册系列</title>
<style>
@media screen and (device-aspect-ratio:16/10){
    body{color:#f00;}
}
</style>
</head>
<body>
<div class="test">当你将输出设备屏幕分辨率为16:10时，本行文字显示为红色</div>
<script>
</script>
</body>
</html>

实例,判断屏幕横屏：

@media screen and (min-aspect-ratio: 13/8) {}

移动设备显示尺寸大全

@media screen and ( min-width: 212px){/213px显示屏样式 LG Optimus One/}
@media screen and ( min-width: 319px){/320px显示屏样式苹果4/4S/5C/5S黑莓Z30 /}
@media screen and ( min-width: 359px){/360px显示屏样式索尼Z1/}
@media screen and ( min-width: 383px){/384px显示屏样式黑莓Z10 谷歌 Nexus 6 LG Optimus G/}
@media screen and ( min-width: 399px){/399px显示屏样式三星galaxyNote/}
@media screen and ( min-width: 414px){/414px显示屏样式苹果6plus/}
@media screen and ( min-width: 423px){/424px显示屏样式 LG 4X /}
@media screen and ( min-width: 479px){/480px显示屏样式索尼MT27i Xperia sola/}
@media screen and ( min-width: 539px){/640px显示屏样式摩托罗拉Droid3/4/Razr Atrix 4g/}
@media screen and ( min-width: 639px){/640px显示屏样式/}
@media screen and ( min-width: 640px){/640px以上显示屏样式/}

参考地址：http://www.w3cplus.com/content/css3-media-queries