流式布局

流式布局（百分比布局/非固定像素布局）

通过盒子的宽度设置为百分比来根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充
为了避免页面无限拉伸对内容的影响，有时需要设置最高宽度max-width和最低宽度min-width；max-height,min-height**

viewport（视口）

浏览器显示内容的屏幕区域。布局视口(layout viewport)、视觉视口(visual viewport)和理想视口(ideal viewport)

layout viewport ：那些为桌面设计的网站也能在移动浏览器上正常显示的宽度（这是浏览器的一个默认值）
visual viewport ：浏览器可视区域的大小
ideal viewport：  能完美适配移动设备的viewport。即不需要用户缩放和横向滚动条就能正常的查看网站的所有内容，显示的文字的大小是合适的。

meta viewport 中的content有6个属性,如下：

属性	属性值
width	设置layout viewport的宽度，为一个正整数，不带单位，或者写字符串device-width
initial-scale	初始缩放比，大于0的数字
maximum-scale	最大缩放比，大于0的数字
minimum-scale	最小缩放比，大于0的数字
user-scalable	用户是否可以缩放，yes(1) or no(2)

meta标签作用：让当前viewport的宽度等于设备的宽度，同时不允许用户手动缩放，一般情况下就这样写就可以了，其他属性不常用

二倍图

• 二倍图

  准备的图片比实际需要的尺寸大2倍，因为一般情况下iPhone6的尺寸为375px，图片最大750px够适应其他手机屏幕了，不会失真。

  图片的缩小，img标签直接用width和height控制，设置为100%自适应，背景图用background-size控制

• 背景缩放background-size

  background-size：背景图宽度 背景图高度；只写一个参数，默认为宽度，高度会等比例缩放；单位是百分比，默认是父盒子的百分比宽高

  background-size:cover；背景图完全覆盖盒子，可能出现背景图片显示不全的情况

  background-size:contain；高宽等比例拉伸，当宽或高铺满了盒子，另一个就不再进行拉伸，可能出现部分空白区域

注：因为是百分比布局，通常不用确定数值设置宽高，所以经常使用弹性布局和网格布局来做，