写在前面的话

---

响应式（responsive），顾名思义，就是物体自身具备能够适应各种不一样环境的能力，而网页的响应式布局就好比把一杯液态的网页倒进各种大小不一样的玻璃瓶里，不管是从哪个角角度上看去，页面的形态都是那么的自然，那么的合理。响应式的网页看上去会比传统的pc页面“聪明”一点，它们知道如何把自己体面的塞进各种尺寸不一样的移动端设备里面，用更亲民的呈现方式，让拇指一族们爱不释手。它们可以“伪装”得像原生手机App那样展现出同样流畅，华丽的交互体验，甚至还能披上App的外衣，为了hybrid app的荣誉与native app一战！响应式的潮流还在不断的前进，趁着这个热度，就来谈一谈响应式布局的技巧。

打开响应式门的钥匙

---

The key， 一般都是在讲某个概念的关键核心部分，那么the key of responsive一定离不开CSS3里面的Media Query，也就是常说的“媒体查询”。所有接下来要提到的布局技巧都是在media query的基础上建立的，当然你完全也可以通过代码的方式来做到和媒体查询同样的效果{if（你不嫌麻烦）}。媒体查询的工作原理很简单：设置断点，分不同区间，以像素为单位，设备的宽度属于哪个区间就套用哪个区间的样式。举个栗子：

@media screen and (min-width: 320px) and (max-width: 768px) {
  .submit {
    ......
  }   
}

上面设了两个断点，理论上是可以有三个区间，即[0,320]、[320,768]、[768,没上限]，而上面的样式则会套用在宽度在[320,768]范围里的设备中，这些设备一般包括iphone，ipod以及ipad竖屏。通过media query我们完全可以针对不同尺寸的屏幕大小，来定制我们想要的布局。

响应式布局的几种方法

---

页面元素宽度基于百分比的响应式

这是最常见也是最基础的做法。在非响应式的pc端网页中，从设计图开始，页面中的每个元素都被设置好了固定的宽度，无论怎样改变窗口的大小，页面中各元素的布局与大小始终保持与设计稿设一致。而到了移动端的尺寸，我们需要通过设置断点，基于移动端的设计稿，重新改变pc端原有的布局。但问题是，移动端的设计稿往往只出一份（基于一个通用的尺寸），然而市面上移动端设备的尺寸、分辨率参差不齐，设计师也不可能细微到为每个不同的设备出一份精确的设计图。因此，为了能够让页面得体的显示，页面元素的宽度会被设置成百分之多少，以确保各个元素的大小可以基于一个比例输出。

1.png

上图看做是一个在768px宽度（ipad竖屏）下的一个页面，其中包含了 顶部导航（灰色）、页面头图（蓝色）、页面主体（红色）以及页脚（棕色）。每个色块的宽度都设置成百分比的宽度，这使得元素在其他的尺寸下同样可以以这个比例显示：

iphone5:

iphone5.png

iphone6:

iphone6.png

而每个色块的高度则以其包含的内容的主体来做对应的调整：

• 如果色块里面包含的是图片，例如图中的蓝色部分，其高度可以是基于原图宽高比保持比例输出的。
• 如果色块里面包含的只有文字，例如蓝色部分里面都是文字，在这种情况下，高度不需要保持比例，让里面的文字自适应填充就好。
• 如果色块的主要作用是用于布局，里面还包含例如图片、文字等其他元素，其宽高比，最好保持与设计稿的比例一致，这里就需要用到媒体查询，来维护一致的宽高比。例如，假设ipad下显示红色块的宽高比就是设计图上的比例，那么iphone下为了保持一致，红色块就不应该那么‘扁高’了。

元素宽度基于百分比的布局保证了页面的响应式，然而在设置这些百分比的数值时，我们需要根据色块所占据每行的列数，来计算他们各自所占的百分数，这其中可能还会考虑到彼此之间的间距。例如图中红色部分的色块，在设置宽度百分比的时候，我们甚至还要把其中的间距也要用百分比来表示，这其中的计算难免会出现错误。倘若我们不把这些常用到的比例归纳成常用的class使用，而是直接写上数值（代码中会出现大量%单位的数值），这不仅会显得繁琐，且大大降低代码的维护性。此外，我们可能希望这种百分比的布局更加灵活，譬如上图红色块里，在如此狭小的手机屏幕上显示2列甚至是3列已经是相当拥挤了，这时候我想制定一套规则，让这些元素的布局可以在狭小的空间里显示一列，而在更宽的空间里才显示2列、甚至3列。有没有什么方法，可以让随心所欲的去定制这么一套规则，而不需要去计算这些百分比宽度与间距，能不能只需把关注点放在每行显示多少列，而这一列该占多少比例就可以了？答案是有的，bootstrap的栅格系统正是为了解决这些问题而应运而生。

栅格系统

bootstrap的栅格系统天生就是为响应式布局而生的。这个系统会随着屏幕尺寸的变化，自动为占据屏幕的每一行分为最多12列。

栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。栅格系统非常贴切网页的内容以一种从上到下一行一行排布的形式，以格子为单位拼凑成你需要的布局。换句话说，任何网页里的布局，都可以将其栅格化，除此之外，我们甚至可以利用栅格系统来制定其在不同尺寸下的不一样的布局。

关于栅格系统的具体用法，可以参考下bootstrap里的官方介绍，在这里我举个简单的例子用来展示其强大之处：
首先看一段代码：

<div class="row"> 
  <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div> 
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row"> 
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> 
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div> 
  <div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>

首先说明的一点，上面代码里出现的类名如果需要其生效，必须要引用到bootstrap的css代码。接下来有人一定会吐槽，尼玛这些带类名都是些神马，放那么类名用来布局，你在逗我玩？不急不急，待我慢慢道来：

• 首先，栅格系统的基本框架是这个样子的：

  <div class="container">
    <div class="row">
      <div class="col-..."></div>
      ...
    </div>
  </div>
  

  也就是说，栅格里的每一行必须要被包裹在一个container的类里，和列相关的类只能被包含在row的类里。
• 接着，让我们彻底剖析下这个类名col-xs-12，从左到右来吧：
  col：表示该项是一个列
  xs：是bootstrap栅格系统里用于表示适用于小屏幕尺寸的一个断点（<768px）标识符，也就是说，类前缀为.col-xs的样式会在小于768px的屏幕宽度下生效。除了xs，栅格系统里还有sm、md、lg，它们对应的断点分别是：>=768px，>=992px，>=1200px。因此，只有在满足这些断点条件的情况下，其对应的类前缀的样式才能够生效。
  12：后面的数字就是表示其样式生效的呈现效果。之前提到，栅格系统会随着屏幕尺寸的变化，自动为占据屏幕的每一行分为最多12列，col-xs-12直译过来就是表示：在小于768px的设备尺寸下，套用这个类的div（也就是这一列）占据了这一行的12个格子，也就是它以100%的宽度占满了一整行。

基于以上的粗略解释，再来看看一开始列出来的代码在不同尺寸宽度下的表现，我想其强大之处应该是一目了然：

<768px(xs生效):

400.png

>=768px(sm生效):

780.png

>=992px(md生效)

1030.png

我觉得有必要引用下官方对栅格参数的介绍，以便对其工作效果会有一个更详尽的描述：
通过下表可以详细查看 Bootstrap 的栅格系统是如何在多种屏幕设备上工作的：

args.png

Flex-box 软盒子模式布局

比起前面两种介绍的方法，软盒（又称作伸缩盒）模式的布局则是一种完全不一样方法，前者的响应式方式是基于宽度百分比，而后者则是通过控制设置其弹性属性flex来达到响应式的效果，而我认为软盒模式在布局上除了支持响应式的布局之外，其自身布局的方式，以及它对包裹在其内部元素之间的间距、显示顺序的控制大大颠覆了原来的页面流布局方式，软盒布局一定会是日后网页布局的一大潮流。有关flex-box的详细用法可以参照大漠兄翻译的一篇译文，而我日后也会贴出自己在使用软盒布局方面的一些心得，毕竟最近项目都是在用flex-box来做响应式，我想以后只要待ie完全退出江湖，flex-box将定会成为网页布局的首选项。