web响应式布局

随着css3的诞生，近几年web响应式布局越发流行，虽然从电脑端到手机端的响应式布局。在正真的用户使用上作用不大（个人觉得绝大多数人不会把浏览器从大屏显示状态要缩小到近似手机大小的尺寸去使用）。不过确实在电脑端根据不同大小的屏幕，给出不同的内容尺寸宽度还是能提升一定的用户体验的。

由于本人所在公司的老板特别喜欢响应式布局，决定要从电脑端响应到手机版时，应该有不少草泥马在页面仔们内心飘过。其实身为半个页面仔的我，也是觉得不是很有必要这样做。因为我们的产品在后端渲染时，已经做了终端设备的判断，根据不同设备渲染不同的界面。但是老是听人讲Apple的页面多少好，人家随便拉伸会自动响应布局，内心还是想证明咱们的页面仔也是可以的！然后就开始了前端小团队的自适应布局入坑作业。

在大多数“外行人”的眼里，不就是多写几行代码把桌面版和移动版的样式写写一起么。特别是有Bootstrap这样的前端样式框架出现，更加让他们如此认为。不过话说回来，真要是就遵循Bootstrap的栅格布局来设计的话，那到确实是轻松加愉快啊。虽然过程中会比单写一个尺寸的要多考虑一些，但是真心不会增加很大精力去模块布局。可往往事与愿违啊，设计的稿子完全不是这么来的。布局不是左右分明可以12栅格的，背景也不是内容剧中外围纯色的等等。一系列的问题，导致前端刚开始做没多久就开始跟我诉苦了。由于开发时间相对较短，确实前端也有些压力。然后身为半个页面仔的我，开始分担前端页面工作。

废话讲到这里，接下来进入正题。响应式布局主要是通过css3的media来根据浏览器的宽度来起效对应的样式。我们最常使用的就是max-width和min-width来当作媒体查询的判断条件了。例如@media (max-width: 768px){...}，表示在浏览器最大宽度小于等于768px时，大括号内的样式生效。min-width则表示是大于等于对应值时样式生效。由于适配到移动端，那么在header里就加上一段<meta name="viewport" content="width=device-width, initial-scale=1"/>来适配。那么如果我们将要做桌面、平板、手机三个尺寸的话，假设分界点为768px、992px（小于768px为手机，大于等于768px为平板、大于等于992px为桌面）。那么假设为移动端优先的话，Bootstrap就是以移动端优先。那么默认的移动端样式，就不需要添加媒体查询。示例样式代码如下：

/*手机或者不支持媒体查询的浏览器，显示class有btn的按钮宽度为60px*/
.btn{width: 60px;display: block;height: 30px;}
@media(min-width: 768px){
  /*平板下显示宽度为80px*/
  .btn{width: 80px;}
}
@media(min-width: 992px){
  /*桌面下显示宽度为100px*/
  .btn{width: 100px;}
}

到此为止已经知道如何使用css的媒体查询功能，编写对应不同屏幕尺寸的样式。但要真要比较好的实现响应式布局还是没有这么简单。如果没有在设计之时就考虑如何来做响应式布局，而只是为了到达响应式而去做的话；那么往往就变成了就是把多种尺寸的页面整到同一个页面里面，利用媒体查询来控制哪个页面该显示罢了。个人认为这种形式完成的响应式，完全就是为了完成响应式的炫酷而已。实际上，并没有给开发上或者用户体验上带来多少好处和提升。首先，大多数用户并不会刻意的去放缩浏览器来刻意查看响应式效果。其次，这种做法在DOM结构上，往往是不可复用。那么以这样的形式完成的页面，只会增加前端开发的复杂性；以及用户在访问网页的时候，带来更多的流量消耗。当然为了很好的解决这种情况，像Bootstrap的思想和实现方式就比较好了。最明显的就在于栅格化布局，如：大屏幕左右布局，到小屏幕下成左边在上、右边在下的布局。那么如果在这样的规范下去进行设计，那么DOM结构将能得到很大程度的复用。开发基本上可以使用一套DOM结构，给不同的模块赋予多种尺寸下对应的class来控制布局。如此一来，开发复杂度降低；代码复用度变高，用户访问时流量消耗也会幅度下降。那么总结上述来说，要很好的完成响应式布局，将不只是前端开发可以完成的；要在设计上就考虑出符合网页布局逻辑的响应式界面，再加上前端将其优美的转换成前端代码；如此，才能比较完美的完成响应式布局。

可以说现在很多做了响应式布局的网站，就算没有直接使用Bootstrap，但很容易看出栅格布局等思想还是大同小异。如今很多公司招前端也都将Bootstrap列入了要求的技能项，做前端开发和设计的，不妨参考一下Bootstrap。