网页自适应

1. 在网页代码的头部，加入一行viewport元标签

2. 宽度不要用绝对的

width:auto;/width:XX%’

3. 字体大小是页面默认大小的100%，即16像素，不要使用绝对大小px，要使用相对大小“rem”

1rem = 10px

4. 流动布局，“流动布局”的含义是，各个区块的位置是浮动的，不是固定不变的

使用左浮动和右浮动，好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向上溢出，避免了水平滚动条的出现。

5. 选择加载css

使用css3引入的Media Query模块，自动探测屏幕宽度然后加载相应的css文件
在link标签里加上media这个属性

6. css的@media与@media screen,媒体查询/匹配

媒体查询就是为不同的媒体设备设置不同的css样式，这里的“媒体”包括页面尺寸，设备屏幕尺寸等。
@media与@media screen两者在手机设备上没有区别，但@media screen的css在打印设备里是无效的，而@media在打印设备里是有效的，如果css需要用在打印设备里，那么就用@media.

7. 使用一些ui框架自带的响应式方法；或者可以引入写好的库。