自适应页面设计: Viewport控制， media query和相对单位
viewport，视口，就是对用户的可见部分， 大小因设备而不同。H5引入。
* 没有它： 整体缩放 （ 老网页是固定的大小，浏览器在手机上只是简单地缩放整个页面，所以用户体验很差）
* 有了它： 浏览器会重新排版。而且，
屏幕大小就是Chrome仿真器提示的size。 所以， mobile页面必须要它
用户习惯：
*
用户都习惯上下滚动网站，而不是横向滚动，因此，如果用户必须横向滚动或缩放页面才能阅读，那么这将给用户带来糟糕的体验。
Best Practice：
* 自适应设计的主要概念基础是流畅性和比例可调节性
自适应网页设计（这一概念最初是由 Ethan Marcotte 在’A List Apart’中提出的）回应了用户及其所用设备的需求。版式会因根据设备的大小和功能而变化。例如，手机可能会以单列视图的形式呈现内容，而同样的内容可能会以双列的形式呈现在平板电脑上。
一、视口元素 （viewport meta tag是Apple 的Mobile Safari 引入的，专门对Mobile， 并非标准， 但是多数Mobile浏览器支持）
（Apple官方资料见
https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html）
其HTML文档中必须包含元视口元素（如下），指示浏览器如何对网页尺寸和缩放比例进行控制。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
（以上是正式的写法 HTML5的）
or simplified as:
<meta viewport="width=device-width, initial-scale=1.0">
其中：
width=device-width指令浏览器给网页重排内容，使之适合不同的屏幕大小
initial-scale=1 指示浏览器在不考虑设备方向的情况下，将 CSS 像素与设备无关像素的比例设为 1:1，并允许网页完全占用横向宽度 （特别是 手机旋转模式下）
注意
- 使用英文逗号分隔属性，确保旧版浏览器可以准确解析相关属性。除了设置 initial-scale 外，您还可以在视口上设置以下属性：
- minimum-scale
- maximum-scale
- user-scalable
但是，设置后，这些属性可以停用用户缩放视口的功能，可能会造成网页访问方面的问题。
实例：
<meta name="viewport" content="width=device-width,
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
视图参数：
宽度是Device的宽度， 不缩放 (初始比例1，最小比例1，
最大比例1)
二、不要使用很宽的元素，浏览器无法自动重排它。
如果图片宽度大于视口宽度，那么就会导致视口横向滚动。您应该调整此内容，使其适合视口内的宽度，以便用户无需横向滚动
1） 如果元素的css宽度过大，则它在窄视口的设备上水平超界. ==》用相对单位100%好. （例如，iPhone 等宽度为 320 CSS 像素的设备）
2） 如果元素的css位置过大，则它超界，显示在屏幕外.
。因此，请改为使用相对宽度值，例如 width: 100%。同样请注意，使用较大的绝对定位值可能会使元素脱离小屏幕上的视口
设计元素的最佳效果，不要依赖于viewport的宽度。 因为以css像素单位表达的某些屏幕的分辨率和宽度变化很大。
三、媒体查询（@media）
媒体查询是可应用于 CSS 样式的简单过滤器。有了这些过滤器，我们可以根据设备呈现内容的特点轻松更改样式，包括显示屏类型、宽度、高度、方向甚至是分辨率
您可以将打印必需的所有样式放在打印媒体查询中：
<link rel="stylesheet" href="print.css" media="print">
* 在样式表链接中使用 media 属性
* 嵌入 CSS 文件的媒体查询：@media 和 @import。（尽量避免使用 @import，以提高性能）。
例如： 下面的代码片段， 当 设备的宽度介于500px到 600px之间， 而其是 横屏的时候，定义一组样式。
@media (min-width: 500px) and (max-width: 600px) and (orientation: landscape) {
h1 {
color: blue;
}
.desc:after {
content:" 本设备的宽度介于500px到 600px， 而其是 横屏";
}
}
其中使用了media的min-width， max-width和orientation参数，用了逻辑运算and， 还可以查询min-height， max-height等参数， 更多参数和逻辑运算参考：https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
不同媒体查询适用的逻辑并不是互斥的，因此，开发者可以根据 CSS 中优先级的标准规则，应用满足生成的 CSS 区块标准的任何过滤器。
<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
- 当浏览器宽度介于 0 像素和 640 像素之间时，系统将会应用 max-640px.css。
- 当浏览器宽度为 640 像素或大于此值时，系统将会应用 min-640px.css。
<l <link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">
- 在竖版Portrait时，使用 portrait.css。
- 在横版Landscape时，使用 landscape.css。
用min-width创建查询, 不要用min-device-width。因为：min-width 以浏览器窗口尺寸为依据，浏览器支持度好。
备注（ min-device-width 屏幕尺寸为依据，浏览器支持差， 或者误报为预期的视口宽度。另外，使用 *-device-width 会阻止内容适应允许窗口调整大小的桌面设备或其他设备，因为该查询基于设备的实际大小，而非浏览器窗口大小）
四、使用相对单位
在顶级 div 上设置 width: 100% 可以确保其横跨视口的宽度，对视口来说既不会太大也不会太小。无论设备是宽度为 320 像素的 iPhone、宽度为 342 像素的 Blackberry Z10，还是宽度为 360 像素的 Nexus 5，div 均会适合这些屏幕。
此外，使用相对单位可让浏览器根据用户缩放程度呈现内容，而无需为网页添加横向滚动条。
div.fullWidth { width: 100%; }
https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/size-content-to-the-viewport?hl=zh-cn
（RWD： Responsive Web Design）
五、基于视口大小的相对单位，vw, vh，vmin和vmax
这4个相对单位是CSS3新增的
vw: 1% viewport width
vh: 1% viewport height
vmin: 就是min(vw, vh)
vmax: 就是max(vw, vh)
举个例子，如果视口宽 = 1024， 高=768， 那么
10vw 就是102.4
10vh 就是76.8
在横屏的时候， vmin就等于 vh， 768
在竖屏的时候， vmin就等于 vw
使用此单位的设计，能够自动使用各种手机屏幕的大小。省去了media query。
附录： 常见手机的设备分辨率和viewport分辨率 (http://www.cnblogs.com/GameEngine/p/7237405.html)
