10.CSS3弹性布局、响应式布局、PS
响应式 Web 设计 - Viewport
响应式布局是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。
优点：
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点：
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
(1)、什么是 Viewport
viewport 是用户网页的可视区域。
viewport 翻译为中文可以叫做"视区"。
手机浏览器是把页面放在一个虚拟的"窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。
- 、设置 Viewport
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：
width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。
- 响应式 Web 设计 - 网格视图
- 、什么是网格视图
很多网页都是基于网格设计的，这说明网页是按列来布局的。
使用网格视图有助于我们设计网页。这让我们向网页添加元素变的更简单。
响应式网格视图通常是 12 列，宽度为100%，在浏览器窗口大小调整时会自动伸缩。
- 、创建响应式网格视图
首先确保所有的 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: 1px solid red;
}
每一行使用
列中行为左浮动，并添加清除浮动：
.row:after {
content: "";
clear: both;
display: block;
}
我们可以添加一些样式和颜色，让其更好看：
- 响应式 Web 设计 - 媒体查询
- 、定义和使用
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
- 、CSS语法
动画是使元素从一种样式逐渐变化为另一种样式的效果。
@media only mediatype and|not (media feature) {
CSS-Code;
}
你也可以针对不同的媒体使用不同 stylesheets :
- 、媒体类型
| 值 |
描述 |
| all |
用于所有设备 |
| aural |
已废弃。用于语音和声音合成器 |