响应式布局和bootstrap

最近在看项目代码，看到有使用响应式布局技术，这里就大概罗列总结一些看到的，随看随补充吧：

@media(max-width:768px)

{

height 257px
background url(../images/index_bg_peolpe_bottom1.png) repeat-x 0px center

}

类似上面代码所述，指定的CSS样式被放在了@media()里，这里会判断当浏览器宽小于768时，进入此CSS样式

这段代码也称作媒体查询。

另外一种布局方式是bootstrap网格布局。

下面代码实例是根据我在项目里看到并且结合自己理解归纳总结的：

<div class="container">

<div class="row">     //此处开始网格布局，需要先指定一个行

<div class="col-md-12"></div>   //此处展示了一列div需要占用的宽度

</div>

</div>

上面代码实例里出现了container,row和col-md-12关键字

那么这些关键字具体都是做什么用的呢，下面就来一一总结归纳。

container：可以理解为包含row和col的容器，并且可以给container制定宽度和长度

row:代码container里具体包含几行

col:与row相辅相成，有row就必有col,代表一个row里包含了几列

col-md-12:其中的md代表768px宽度的显示器，也就是桌面显示器(可以将它理解为媒体查询差不多的功能)。

而md后面的12则代表col列的宽度,bootstrap里将宽度分割成了12个列，开发人员可以根据需求分配不同的比例，让各列匹配不同的宽度。