-
简单定义
- 一份代码能够适应全部屏幕尺寸
-
响应式三要素
- 第一，弹性布局；
- 第二，弹性图片；
- 第三，media 查询。
四种响应模式
-
Column Drop 列下沉
- 手机上每一个大块单独占据一行，随着屏幕尺寸拉伸会在同一行上形成多个 column 列
-
Mostly Fulid
- 基本上跟 Column Drop 一样，但是有一点点“固定布局“的特点：当到达一定宽度后，主体内容部分不再变宽，成为固定宽度。
-
Layout Shifter
- 变换式，也就是不必遵循原有内容顺序，可以根据最佳展示需要来调整大块顺序。
-
Off Canvas
- 抽屉式，屏幕不够宽的时候，隐藏，通过按钮呼出。足够宽的屏幕上，始终显示。
viewport设置
- http://facebook.github.io/react/ 采用的解决方案是：
<meta name="viewport" content="width=device-width">
- 但是更为常见的设置是：
<meta name="viewport" content="width=device-width, initial-scale=1">
很多知名的网站都是用了上面的设置，例如 http://alistapart.com/ ，
