CSS3响应式布局
响应式布局的优点
响应式布局是一个网站能够兼容多个终端——而不是为每个终端做一个特定
的版本。
优点：
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点：
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
1.响应式Web设计-Viewport
（1）定义 Viewport
viewport是用户网页的可视区域。（视区）
(2)、设置Viewport
<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设计-网格视图
定义：基于网格设计的，网页是按列来布局的
(2)、创建响应式网格视图
首先确保所有的HTML元素都有box-sizing属性且设置为border-box。确保边距和边框包含在元素的宽度和高度间。
插入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ box-sizing: border-box; }
/*之后使用12列的网格系统可以更好的控制响应式网页。
首先我们可以计算每列的百分比:100%/12列=8.33%。在每列中指定class，class="col-"用于定义每列有几个跨度*/
.col-1 { 8.33%;} .col-2 { 16.66%;} .col-3 { 25%;} .col-4 { 33.33%;} .col-5 { 41.66%;} .col-6 { 50%;} .col-7 { 58.33%;} .col-8 { 66.66%;} .col-9 { 75%;} .col-10 { 83.33%;} .col-11 { 91.66%;} .col-12 { 100%;} .left,.right{ float: left; }
/*所有的列向左浮动，间距(padding)为15px：添加内边距 需要box-sizing：border-box 不然会影响盒子大小*/
[class*='col-']{ padding: 15px; } .box:after{ content: ''; clear: both; display: block; } </style> </head> <body> <div class="box">
<!-- 每一行使用<div>包裹。所有列数加起来应为12：-->
<div class="left col-3" >abcasbdsadfgsdf</div> <div class="right col-9">113345666e23</div> </div> <div>ajdfklsjflkdsjflkdsjfkldsjflkdsjflkdsjflksdjflkdsjflk</div> </body>