CSS3

随着pc、移动设备的屏幕规格增多、增大，当前，依据使用Media Query在不同的条件下使用不同的样式，使页面达到不同的渲染效果，可以有效的解决各种屏幕分辨率下的用户体验及移动web开发多种需求。

Media Queries（媒体查询）：作用就是允许添加表达式用以确定媒体的环境情况，以此来应用不同的样式表。换句话说，其允许我们在不改变内容的情况下，改变页面的布局以精确适配或响应各种不同分辨率的设备。（通过屏幕大小，使用不同css对页面进行重构或开发，让网页会根据屏幕宽度调整布局）

一、了解viewport

viewport：也就是可视区域。对于桌面浏览器，我们都很清楚viewport是什么，就是除去所有工具栏、状态栏、滚动条等等之后用于看网页的区域，这是真正有效的区域。由于移动设备屏幕宽度不同于传统web,因此开发时需要改变viewport。

通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点，就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域，但viewport又不局限于浏览器可视区域的大小，它可能比浏览器的可视区域要大，也可能比浏览器的可视区域要小。在默认情况下，一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。

（利用meta标签对viewport进行控制）常见用法：
<meta name="viewport" content="width=320,initial-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1user-scalable=no;" />
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1" media="(device-height: 568px)" />
width - // viewport 的宽度 （范围从200 到10,000，默认为980 像素）
height - // viewport 的高度 （范围从223 到10,000）
initial-scale - // 初始的缩放比例 （范围从>0 到10）
minimum-scale - // 允许用户缩放到的最小比例
maximum-scale - // 允许用户缩放到的最大比例
user-scalable - // 用户是否可以手动缩 (no,yes)

注意：关于viewport，还有一个很重要的概念是：iphone 的safari 浏览器完全没有滚动条，而且不是简单的”隐藏滚动条”，是根本没有这个功能。

iphone 的safari 浏览器实际上从一开始就完整显示了这个网页，然后用viewport 查看其中的一部分。当你用手指拖动时，其实拖的不是页面，而是viewport。浏览器行为的改变不止是滚动条，交互事件也跟普通桌面不一样。

二、Media Queries属性

在css2中，media type属性，用于判断媒体类型。

在css3中，新增了media query属性用于增强media type属性。media query属性的是media type属性的增强功能（Media Query是CSS3对Media Type的增强版），使media type可以进行条件判断输出对应的css。

（media_type 、 设备类型说明）
screen：指显示器、笔记本、移动端等设备屏幕。
print：指用于打印机的不透明介质、打印预览图等。
projection：指用于显示的项目、投影设备。
braille：盲文系统，指有触觉效果的印刷品；、点字触觉设备
aural：指语音电子合成器、听觉设备。
tv：指电视类型的媒体、电视机等设备类型。
handheld：指手持式显示设备(小屏幕，单色)、便携设备，如手机、平板电脑
all：适合于所有媒体、所有设备。
tty：如打字机或终端等设备
embossed：盲文打印机

在media属性里除了媒体类型，还有 and 、not、only关键字等。 

其实可将Media Query看成Media Type(判断条件)+CSS(符合条件的样式规则)：

// --
<link rel="stylesheet" media="screen and (max- 600px)" href="small.css" />
// --
@media screen and (max- 600px) {
    选择器 {
        属性：属性值；
    }
}

在语句上面的语句结构中，可以看出Media query和css的属性集合很相似，主要区别在：

1、Media query只接受单个的逻辑表达式作为其值，或者没有值；

2、css属性用于声明如何表现页页的信息；而Media Query是一个用于判断输出设备是否满足某种条件的表达式；

3、Media Query其中的大部分接受min/max前缀，用来表示其逻辑关系，表示应用于大于等于或者小于等于某个值的情况；

4、CSS属性要求必须有属性值，Media Query可以没有值，因为其表达式返回的只有真或假两种；

注意：一个Media Query可以包含0到多个表达式，表达式又可以包含0到多个关键字，以及一种Media Type。

三、Media Queries两种使用方式：

（---直接在link中判断设备的尺寸，引用不同的css文件；---直接写在<style>标签里）

1、最大宽 Max Width（屏幕 <= 600px）
<link rel="stylesheet" media="screen and (max-600px)" href="small.css" type="text/css" />
2、最小宽 Min Width（屏幕 >= 900px）
<link rel="stylesheet" media="screen and (min-900px)" href="big.css" type="text/css" />
3、多个Media Queries（600px <= 屏幕 <= 900px）
<link rel="stylesheet" media="screen and (min-600px) and (max-900px)" href="style.css" type="text/css" />

4、设备屏幕的输出宽度Device Width（适用于最大设备宽度为480px；max-device-width：设备的实际分辨率（也就是可视面积分辨率））
<link rel="stylesheet" media="screen and (max-device- 480px)" href="iphone.css" type="text/css" />

5、iPhone4（专门针对iPhone4的移动设备）
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="iphone4.css" />
6、iPad（在大数情况下，移动设备iPad上的Safari和在iPhone上的是相同的；不同之处是iPad声明了不同的方向）
纵向(portrait)：<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" />
横向（landscape）：<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" type="text/css" />

7、android：（为android手机在不同分辨率提供特定样式，解决屏幕分辨率的不同给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" />

8、not关键字：（用来排除某种制定的媒体类型（特定的设备），换句话来说就是用于排除符合表达式的设备）
（非打印设备）：<link rel="stylesheet" media="not print and (max- 1200px)" href="print.css" type="text/css" />
9、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 Queries的设备来说，如果存在only关键字，设备的Web浏览器会忽略only关键字并直接根据后面的表达式应用样式文件。对于不支持Media Queries的设备但能够读取Media Type类型的Web浏览器，遇到only关键字时会忽略这个样式文件。

10、其他使用：
没有明确指定Media Type，那么其默认为all：
<link rel="stylesheet" media="(min- 701px) and (max- 900px)" href="medium.css" type="text/css" />
另外使用逗号（，）被用来表示并列或者表示或，如下（被用在宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备）
<link rel="stylesheet" type="text/css" href="style.css" media="handheld and (max-480px), screen and (min-960px)" />

11、兼容性：
支持 Media Queries 特性的浏览器：IE9+, Firefox, Chrome 和 Safari。（主要是支持html5、css3特性的）
遗憾是的，IE8 及更老版本的浏览器不支持 CSS3 Media Queries，不过可以使用 Javascript解决 。

四：常用手机分辨率：（用作响应式排版设计）

1、 手机： 

iPhone4、4s屏幕尺寸是3.5英寸，屏幕分辨率是960*640
iPhone5、5s屏幕尺寸是4英寸，分辨率是1136*640
三星Galaxy s4屏幕尺寸是5英寸，分辨率是1920*1080
三星Galaxy Note2、S3屏幕尺寸是5.5英寸和4.8英寸，分辨率都是1280*720 
三星Galaxy Note 屏幕尺寸是5.3英寸，分辨率是1280*800
其他还在整理中...

2、平板：

iPad 4、iPad 5屏幕尺寸是9.7英寸，分辨率在2048*1536.
Ipad mini、iPad 2屏幕尺寸是7.9英才，分辨率是1024*768
三星Galaxy note 10.1、Tab3.8、Tab2 P5100屏幕尺寸是10.1英寸，屏幕分辨率是1280*800
三星Galaxy Tab P3110、Tab3.7屏幕尺寸是7英寸，屏幕分辨率是1024*600
谷歌Nexus 7屏幕尺寸是7英寸，屏幕分辨率是1280*800
其他还在整理中...

水平有限，文中错误不妥在所难免，欢迎批评指正建议评论。文章将不定期修改完善斧正。谢谢！

本文参考自：
     移动前端开发之viewport的深入理解          http://www.cnblogs.com/2050/p/3877280.html
     CSS3 Media Queries 实现响应式设计          http://www.cnblogs.com/lhb25/archive/2012/12/04/css3-media-queries.html
     CSS3 Media Queries 详解          http://swordair.com/details-on-css3-media-queries/
     CSS3 Media Queries          http://www.w3cplus.com/content/css3-media-queries
     http://miliwo.com/w/1859/26045