css手动实现一个栅格布局

利用css3中的新特性对不同分辨率的终端进行页面适配：

1.<meta name="viewport" content="width=device-width, initial-scale=1.0">

2.网格布局：整体视图区域被分为12列，每列占约8.33%。一行内各个小div的col之和为12

3.媒介查询：@media 媒介查询

 

整体实现方式：以一行分为三部分为例。

html：

<div class="row">
    <div class="left col-xs-6 col-sm-3 col-md-2 col-lg-1">左边的div</div>
    <div class="middle col-xs-12 col-sm-6 col-md-8 col-lg-10">中间的div</div>
    <div class="right col-xs-6 col-sm-3 col-md-2 col-lg-1">右边的div</div> 
</div>

css:通用部分

*{box-sizing: border-box;}
.row:after{content:"";clear:both;display:block;}
[class*="col-"]{float:left