响应式布局

1. meta viewport

viewport是指web页面上用户的可见区域，viewport的大小是和设备相关的。

• width：控制viewport的宽度大小，你可以给它指定一个值，如：600，或者甚至还可以给它一个特殊的值，如：device-width，device-width为设备的宽度。
• height：与width相对应，指定viewport高度。
• initial-scale：初始缩放比例，也即是当页面第一次load的时候缩放比例。
• maximum-scale：允许用户缩放到的最大比例。
• minimum-scale：允许用户缩放到的最小比例。
• user-scalable：是否允许用户手动缩放。

2. 媒体查询

css顶端加@media，可以针对不同的媒体类型定义不同的样式。

3. 媒体查询

rem是相对于html字体大小的比例，比如根元素设置为

html{font-size:10px}

则1rem = 10px，2rem=20px等等