响应式布局
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。
先看个栗子
我们制作网页时，经常涉及到栅格排版，比如左侧的主导航、中间的正文、右侧的付导航。那么看看最差的实现方式吧：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0px; padding: 0px; font-size:15px; } div{ padding: 10px 20px; } .left{ width:25%; float: left; } .middle{ width:40%; float: left; } .left{ width:25%; float: left; } </style> </head> <body> <div class="left"> <h3>主侧栏</h3> 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之， 就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。 这个概念是为解决移动互联网浏览而诞生的。 </div> <div class="middle"> <h3>内容</h3> 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之， 就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。 这个概念是为解决移动互联网浏览而诞生的。 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验， 而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。 随着越来越多的设计师采用这个技术，我们不仅看到很多的创新， 还看到了一些成形的模式。 </div> <div> <h3 class="right">右侧栏</h3> 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之， 就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。 这个概念是为解决移动互联网浏览而诞生的。 </div> </body> </html>
网络异常，图片无法展示
|
基础栅格.png
表面看起来貌似没什么问题，但如果我们调整浏览器的宽度后，它是什么效果呢？
网络异常，图片无法展示
|
无响应式布局.gif
看过上面的例子，大家就该了解到，响应式布局对于页面展示的必要性了。那么响应式布局如何实现的呢？
再举个毛栗子
我们通过css的media来实现一个最村儿的相应式布局，当浏览器宽度小于500px时，将网页的背景与字体颜色进行翻转，来看看效果：
网络异常，图片无法展示
|
自定义响应式布局.gif
Bootstrap栅格系统
单纯的去考虑响应式，需要考虑的东西太多了。所以推荐使用Bootstrap。它默认将浏览器分为了12份。我们可以使用它，对浏览器进行快速的栅格化排版，至于响应式布局？完全不用考虑，框架已经为你想好了.....
栅格类格式如下：
class = "col-(size)-(number)"
我们将div套上相关的class即可完成栅格化布局：
- col : column 列
- size：
| lg | large | 大尺寸 |
| md | medium | 中尺寸 |
| sm | small | 小尺寸 |
| em | extra small | 超小尺寸 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" /> </head> <body> <div class="col-sm-3"> <h3>主侧栏</h3> 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之， 就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。 这个概念是为解决移动互联网浏览而诞生的。 </div> <div class="col-sm-7"> <h3>内容</h3> 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之， 就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。 这个概念是为解决移动互联网浏览而诞生的。 响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验， 而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。 随着越来越多的设计师采用这个技术，我们不仅看到很多的创新， 还看到了一些成形的模式。 </div> <div class="col-sm-2"> <h3>右侧栏</h3> 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之， 就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。 这个概念是为解决移动互联网浏览而诞生的。 </div> </body> </html>
网络异常，图片无法展示
|
响应式布局.gif
OK，一切就是这么简单.....
