媒体查询介绍
我今天就总结一下响应式设计的核心CSS技术Media(媒体查询器)的用法。
先看一个简单的例子：
<link rel="stylesheet" media="screen and (max- 600px)" href="small.css" />
上面的media语句表示的是：当页页宽度小于或等于600px,调用small.css样式表来渲染你的Web页面。首先来看media的语句中包含的内容：
- 1、screen：这个不用说大家都知道，指的是一种媒体类型；
- 2、and：被称为关键词，与其相似的还有not,only，稍后会介绍；
- 3、（max-600px）：这个就是媒体特性，说得通俗一点就是媒体条件。
前面这个简单的实例引出两个概念性的东西，一个就是媒体类型（Media Type）和 媒体特性（Media Query），首先一起来理解一下这两个概念：
媒体类型(Media Type)在css2中是一个常见的属性，也是一个非常有用的属性，可以通过媒体类型对不同的设备指定不同的样式，在css2中我们常碰到的就是all（全部）,screen（屏幕）,print（页面打印或打邱预览模式）,其实在媒体类型不止这三种，w3c总共列出了10种媒体类型。
媒体特性Media Query看成Media Type(判断条件)+CSS(符合条件的样式规则),为了更能理解Media Query，我们在次回到前面的实例上：
<link rel="stylesheet" media="screen and (max- 600px)" href="small.css" />
转换成css中的写法为：
@media screen and (max- 600px) { 选择器 { 属性：属性值； } }
其实就是把small.css文件中的样式放在了@media srceen and (max-width;600px){...}的大括号之中。在语句上面的语句结构中，可以看出Media query和css的属性集合很相似，主要区别在：
- 1、Media query只接受单个的逻辑表达式作为其值，或者没有值；
- 2、css属性用于声明如何表现页页的信息；而Media Query是一个用于判断输出设备是否满足某种条件的表达式；
- 3、Media Query其中的大部分接受min/max前缀，用来表示其逻辑关系，表示应用于大于等于或者小于等于某个值的情况；
- 4、CSS属性要求必须有属性值，Media Query可以没有值，因为其表达式返回的只有真或假两种.
常用的Media Query如下表所示：
兼容的浏览器：
Media Queries具体使用
下面我们一起来看看Media Queries的具体使用方式
一、最大宽度Max Width
<link rel="stylesheet" media="screen and (max-600px)" href="small.css" type="text/css" />
上面表示的是：当屏幕小于或等于600px时，将采用small.css样式来渲染Web页面。
二、最小宽度Min Width
<link rel="stylesheet" media="screen and (min-900px)" href="big.css" type="text/css" />
三、多个Media Queries使用
<link rel="stylesheet" media="screen and (min-600px) and (max-900px)" href="style.css" type="text/css" />
Media Query可以结合多个媒体查询，换句话说，一个Media Query可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种Media Type。正如上面的其表示的是当屏幕在600px-900px之间时采用style.css样式来渲染web页面。
四、设备屏幕的输出宽度Device Width
<link rel="stylesheet" media="screen and (max-device- 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-240px)" href="android240.css" type="text/css" /> /*360px的宽度*/ <link rel="stylesheet" media="only screen and (min-device-241px) and (max-device-360px)" href="android360.css" type="text/css" /> /*480px的宽度*/ <link rel="stylesheet" media="only screen and (min-device-361px) and (max-device-480px)" href="android480.css" type="text/css" />
我们可以使用media query为android手机在不同分辨率提供特定样式，这样就可以解决屏幕分辨率的不同给android手机的页面重构问题。
八、not关键字
<link rel="stylesheet" media="not print and (max- 1200px)" href="print.css" type="text/css" />
not关键字是用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备。
九、only关键字
<link rel="stylesheet" media="only screen and (max-device-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- 701px) and (max- 900px)" href="medium.css" type="text/css" />
另外还有使用逗号（，）被用来表示并列或者表示或，如下
<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-480px), screen and (min-960px)" />
上面代码中style.css样式被用在宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上。
下面具体讲解过程：
准备工作1：设置Meta标签
首先我们在使用Media的时候需要先设置下面这段代码，来兼容移动设备的展示效果：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
这段代码的几个参数解释：
-
width = device-width：宽度等于当前设备的宽度
-
initial-scale：初始的缩放比例（默认设置为1.0）
-
minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
-
maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
-
user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
准备工作2：加载兼容文件JS
因为IE8既不支持HTML5也不支持CSS3 Media，所以我们需要加载两个JS文件，来保证我们的代码实现兼容效果：
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
准备工作3：设置IE渲染方式默认为最高(这部分可以选择添加也可以不添加)
现在有很多人的IE浏览器都升级到IE9以上了，所以这个时候就有又很多诡异的事情发生了，例如现在是IE9的浏览器，但是浏览器的文档模式却是IE8:
为了防止这种情况，我们需要下面这段代码来让IE的文档模式永远都是最新的：
<meta http-equiv="X-UA-Compatible" content="IE=edge">
不过又有一个更给力的写法：
<meta http-equiv="X-UA-Compatible" content="IE=Edge，chrome=1">
怎么这段代码后面加了一个chrome=1，这个Google Chrome Frame（谷歌内嵌浏览器框架GCF），如果有的用户电脑里面装了这个chrome的插件，就可以让电脑里面的IE不管是哪个版本的都可以使用Webkit引擎及V8引擎进行排版及运算，无比给力，不过如果用户没装这个插件，那这段代码就会让IE以最高的文档模式展现效果。这段代码我还是建议你们用上，不过不用也是可以的。
进入CSS3 Media
@media screen and (max- 960px){
body{
background: #000;
}
}
@media (max- 960px){
body{
background: #000;
}
}
<link rel="stylesheet" type="text/css" media="screen" href="style.css">
<link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css">
<link rel="stylesheet" type="text/css" media="screen and (max-960px)" href="style.css">
@media (max-device-height:480px) and (-webkit-min-device-pixel-ratio:2){
//自己添加的样式
}
其中对于-webkit-min-device-pixel-ratio作如下解释：
- 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
- 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
说明：本文档兼容性测试基础环境为：windows系统；IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51
语法：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以及以上的浏览器开始支持
例子：
<!DOCTYPE html> <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- 212px){/*213px显示屏样式 LG Optimus One*/} @media screen and ( min- 319px){/*320px显示屏样式 苹果4/4S/5C/5S黑莓Z30 */} @media screen and ( min- 359px){/*360px显示屏样式 索尼Z1*/} @media screen and ( min- 383px){/*384px显示屏样式 黑莓Z10 谷歌 Nexus 6 LG Optimus G*/} @media screen and ( min- 399px){/*399px显示屏样式 三星galaxyNote*/} @media screen and ( min- 414px){/*414px显示屏样式 苹果6plus*/} @media screen and ( min- 423px){/*424px显示屏样式 LG 4X */} @media screen and ( min- 479px){/*480px显示屏样式 索尼MT27i Xperia sola*/} @media screen and ( min- 539px){/*640px显示屏样式 摩托罗拉Droid3/4/Razr Atrix 4g*/} @media screen and ( min- 639px){/*640px显示屏样式*/} @media screen and ( min- 640px){/*640px以上显示屏样式*/}
PS：一般用苹果的屏幕适配就不会有问题
8plus 宽度：375
6plus 宽度：414