css3响应布局
1、响应式布局的优点
响应式布局是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
优点：
(1)面对不同分辨率设备灵活性强
(2)能够快捷解决多设备显示适应问题
缺点：
(1)兼容各种设备工作量大，效率低下
(2)代码累赘，会出现隐藏无用的元素，加载时间加长
(3)其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
(4)一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
2、响应式Web设计-Viewport
（1）定义 Viewport
viewport是用户网页的可视区域。（视区）
(2)、设置Viewport
|
1
|
<metaname="viewport"content="width=device-width,initial-scale=1.0"> |
width：控制viewport的大小，可以指定的一个值，如600，或者特殊的值，如device-width为设备的宽度（单位为缩放为100%时的CSS的像素）。
height：和width相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次load的时候缩放比例
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。
3、响应式Web设计-网格视图
(1)、定义：基于网格设计的，网页是按列来布局的
(2)、创建响应式网格视图
首先确保所有的HTML元素都有box-sizing属性且设置为border-box。确保边距和边框包含在元素的宽度和高度间。
插入
|
1
|
*{box-sizing:border-box;} |
其次，使用12列的网格系统可以更好的控制响应式网页。
首先我们可以计算每列的百分比:100%/12列=8.33%。在每列中指定class，class="col-"用于定义每列有几个跨度
|
1
2
3
4
5
6
7
8
9
10
11
12
|
.col-1{width:8.33%;}.col-2{width:16.66%;}.col-3{width:25%;}.col-4{width:33.33%;}.col-5{width:41.66%;}.col-6{width:50%;}.col-7{width:58.33%;}.col-8{width:66.66%;}.col-9{width:75%;}.col-10{width:83.33%;}.col-11{width:91.66%;}.col-12{width:100%;} |
所有的列向左浮动，间距(padding)为15px：
|
1
2
3
4
5
|
[class*="col-"]{ float:left; padding:15px; border:1pxsolidred;} |
每一行使用<div>包裹。所有列数加起来应为12：
|
1
2
3
4
|
<div class="row"> <div class="col-3">...</div> <div class="col-9">...</div></div> |
列中行为左浮动，并添加清除浮动：
|
1
2
3
4
5
|
.row:after{ content:""; clear:both; display:block;} |
