S1-响应式设计

• 简单定义

  • 一份代码能够适应全部屏幕尺寸

• 响应式三要素

  • 第一，弹性布局；
  • 第二，弹性图片；
  • 第三，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/ ，