CSS3 - @media响应式 媒体查询(Media Querie)

（利用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)

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

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

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

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

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

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

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

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
其他还在整理中...

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
其他还在整理中...