自适应页面设计: 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)