CSS3弹性布局、响应式布局、PS

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

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，class="col-"用于定义每列有几个跨度：
.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：
[class*="col-"]{
float:left;
padding:15px;
border:1pxsolidred;
}
每一行使用<div>包裹。所有列数加起来应为12：
<divclass="row">
<divclass="col-3">...</div>
<divclass="col-9">...</div>
</div>
列中行为左浮动，并添加清除浮动：
.row:after{
content:"";
clear:both;
display:block;
}
我们可以添加一些样式和颜色，让其更好看：
演示示例：响应式网格视图
课堂练习：响应式网格视图练习
3.响应式Web设计-媒体查询
(1)、定义和使用
使用@media查询，你可以针对不同的媒体类型定义不同的样式。<