响应式布局

最初我以为只要用了bootstrap的模板：

 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

有了这句话就可以自动成为响应式布局了。

事实证明，我大错特错。

后来，我发现还需要引用这些js:

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script>window.jQuery || document.write('<script src="../../../../assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
    <script src="../../../../assets/js/vendor/popper.min.js"></script>
    <script src="../../../../dist/js/bootstrap.min.js"></script>

在bootstrap的最新官方文档里，上述语句是响应式布局必备。

因此我以为只要套用bootstrap模板了，我就能做到跨屏幕无障碍响应式开发。事实却再次证明，知其然却不知其所以然的话，我是不可能搞明白的。所以我决定深入基础，把bootstrap的响应式布局的原理搞清楚。

       响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

      响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。（在查阅资料时，我发现有人提到了bootstrap-responsive.css，再一查才发现原来现在bootstrap.css已经集成了之前的bootstrap-responsive.css。）

Bootstrap 将页面分为行（.row），每行 12 列（.col-md-*）。行必须包含在容器里，根据屏幕大小不同，列又分为.col-xs-、.col-sm-、.col-md-、.col-lg-，分别对应手机(<768px)、平板(≥768px)、中等屏幕电脑(≥992px)和大屏幕电脑(≥1200px)。其中出现的这些像素称为临界点，每当浏览器大小或屏幕尺寸从一个临界点到达另一个临界点时，相应的 CSS 类就会起作用，页面布局就会发生变化。

推荐一篇解释bootstrap栅格化布局原理的博文：https://www.cnblogs.com/suwings/p/6079178.htmlBootstrap 框架 栅格布局系统设计原理

响应式网页设计的实现途径有弹性栅格、弹性图片显示、流式布局、CSS Media Query等技术。