CSS3响应式布局

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。确保边距和边框包含在元素的宽度和高度间。

插入

*{box-sizing:border-box;}

　之后使用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：

添加内边距 需要box-sizing：border-box 不然会影响盒子大小

[class*="col-"]{
    float:left;
    padding:15px;
    border:1pxsolidred;
}

　　

每一行使用<div>包裹。所有列数加起来应为12：

<div  class="row">
    <div class="col-3">...</div>
    <div class="col-9">...</div>
</div>

　　

列中行为左浮动，并添加清除浮动：

.row:after{
    content:"";
    clear:both;
    display:block;
}