最近在做公司官网，须要适配挪动端，于是联合本人以前总结的常识，以及在网上找到的相干材料供大家参考。
举个栗子：
 <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