响应式 Web 设计 - Viewport

1. 响应式 Web 设计 - Viewport
响应式布局是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
优点： 面对不同分辨率设备灵活性强,能够快捷解决多设备显示适应问题.
缺点： 兼容各种设备工作量大，效率低下,代码累赘，会出现隐藏无用的元素，加载时间加长,其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果,一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
(1)、什么是 Viewport
viewport 是用户网页的可视区域。
viewport 翻译为中文可以叫做"视区"。
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
(2)、设置 Viewport
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0">

2.响应式 Web 设计 - 网格视图
(1)、什么是网格视图
很多网页都是基于网格设计的，这说明网页是按列来布局的。
使用网格视图有助于我们设计网页。这让我们向网页添加元素变的更简单。
响应式网格视图通常是 12 列，宽度为100%，在浏览器窗口大小调整时会自动伸缩。

(2)、创建响应式网格视图
首先确保所有的 HTML 元素都有 box-sizing 属性且设置为 border-box。
确保边距和边框包含在元素的宽度和高度间。
添加如下代码：
* {box-sizing: border-box;}
以下实例演示了简单的响应式网页，包含两列：
.menu {
    width: 25%;
    float: left;
}
.main {
    width: 75%;
    float: left;
}

12 列的网格系统可以更好的控制响应式网页。
首先我们可以计算每列的百分比: 100% / 12 列 = 8.33%。
在每列中指定 class࿰