响应式设计

1.viewport

不建议设置缩放比例

2.响应式的图片

（1）大图随容器自动缩放，保持宽高比

（2）max-width:100%;（不设置宽度）

img{

    max-width:100%;

}

3.背景图片

（1） background-size:cover;背景信息不重要，裁切，不管高宽比怎摸变化，都覆盖满

（2） background-size:contain;不裁切

4.保持宽高比

（1）保持宽高比的容器设置padding-top:n%;

5.两栏自适应布局

（1）float   与   BFC

（2）绝对定位

（3）模拟table，display:table;导航栏布局

（4）flex布局，display:flex;导航栏布局

6.网格布局，自动换行

（1）inline-block+justify

（2）flex

7.media query

8.字体设置

font-size:nvw:缺点屏幕大的话字太大了，屏幕太小了，字太小了

font-size:calc(10px+1vw);