响应式布局

1.mate

<meta name="viewport" content="width=device-width, initial-scale=1">
//width = device-width 这一句的意思是让页面的宽度等于屏幕的宽度。

2.使用 rem
rem 指的是 html 元素的 font-size，html 元素的 font-size 默认是 16px，所以 1 rem = 16px；然后根据 rem 来计算各个元素的宽高，然后配合 media query 就可以实现自适应。

3. media query

//有一个需要注意的点是范围大的要放在上面，范围小的放在下面。
@media screen and (max-width: 360px) {  
     html { font-size: 12px;    }
}

参考：css 布局的几种方式