响应式布局的常见解决方案

本文只是一个简介性的介绍，详细的可以看这个：
响应式布局的常见解决方案对比

1.媒体查询，就是查询一下你的屏幕多大，然后根据大小来进行适配
@media screen and (max-width: xxx) { }

2.百分比，就是盒子的宽高都按照%，比如width:20%

3.rem rem单位无论嵌套的层级如何，都只相当于浏览器的根元素（HTML元素）的font-size。默认情况下HTML元素的font-size为16px，所以默认情况下1rem = 16px

4.vw/vh vw/vh是相对于视窗的宽度，视窗宽度是100vw，视窗高度是100vh