标签：
随着现在各种终端的快速发展，做出一些能够适应不同分辨率、不同平台、不同屏幕大小的网页尤为重要，而所谓响应式布局，就是能够自适应用户的显示器大小，呈现出合适的布局，让用户在不同规格的显示器下依然能体验良好。为了达到这样的效果，我们需要写出对应的几套样式。
在CSS3中有个实用的media query，即媒体查询，可以帮助获取各种终端的数据.媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。媒体查询的大部分媒体特性都接受min和max用于表达”大于或等于”和”小与或等于”。如：width会有min-width和max-width媒体查询可以被用在CSS中的@media和@import规则上。通过这个标签属性，我们可以很方便的在不同的设备下实现丰富的界面，特别是移动设备，将会运用更加的广泛。
Bootstranp也为我们提供了很好用的响应式工具，试着使用这些class可以避免创建同一个网站的不同版本，从而能够完善不同设备上的显示效果。但它里面有提到要注意的是，响应式工具目前只是针对块级元素， 不支持inline元素和表格元素。
对于我们的布局而言，其实只有小部分的内容是完全改变的，比如在大的显示器上，导航栏可能是完全呈现的，而在小的显示器上，只做一个小的提示栏供点击显得更为合理。所以在这种情况下，需要写两套样式，在指定情况下只显示对应样式。Visible和hidden的属性可以帮忙解决，在提供的4种屏幕尺寸里面，visible-xs属性就是只对xs型号显示，对其他三种型号则隐藏，hidden-xs属性则完全相反。
布局的大部分内容其实不会变，只是样式结构发生改变，对于这种情况，我们只需要在这一个元素上同时设置对应的不同情况下的属性，比如在大显示器下我们需要一排呈现三块div，而在小显示器下只要一排一个div。
… …
<div class=”container”>
<div class=”row”>
<div class=”col-sm-4 col-xs-12”></div>
<div class=”col-sm-4 col-xs-12”></div>
<div class=”col-sm-4 col-xs-12”></div>
… …
这里有一点，这里的大的显示器只写了sm型号，但代表的是在lg，md，sm型号下都会以这种一排三块的形式呈现。所以对于内容、结构样式在各显示器不用调整的部分，直接写class=”col-xs-n”即可。
以上也是我刚学了一点有关响应式布局的内容，趁着还没忘简单总结一下。虽然刚入门，知道的很局限，但响应式布局使得网站适应不同终端的能力更强，为不同终端的用户提供更加舒适的界面和更好的用户体验，这也是网站的关键竞争力，所以除了学会这种布局方式，还应该多借鉴这一块有创意的布局使网站进一步优化。
标签：
原文地址：http://www.cnblogs.com/zwy123/p/4562092.html
