关于页面自适应布局解决方案

【从布局角度考虑自适应】：

媒体查询：
优点：订制化强
缺点：代码臃肿，不利于维护

flex布局：
优点：目前比较主流的自适应布局方案
缺点：自适应起作用的是flex盒模型内部的元素，flex容器的自适应问题还需要借助其他方案。

【从单位换算的角度考虑自适应】：

rem方案：npm install postcss-pxtorem --save-dev 文档
原理：1rem=根元素默认字体大小（fontsize），其他元素（如body）1rem
=根元素的字体大小（fontsize）；也就是说只要确定好html元素的font-size，就有了一个基准值，调整html的font-size就能做到对页面元素进行等比缩放。

优点：可以实现单位换算，与设计稿较容易保持一致。
缺点：一点儿缺陷是需要配合js，实现窗口变化过程中动态调整根节点的基准值。

vw/vh方案：npm install postcss-px-to-viewport --save 文档
原理：1vw等于html元素宽度的1%，即1vw代表window.innerWidth的1%，1vh 等于window.innerHeight 的数值的 1%。本质也是等比缩放，只不过是浏览器自身支持的，不需要借助js动态调整。
优点：也可以实现单位换算，与设计稿保持一致。（只需要根据设计稿的窗口大小开发，再把尺寸转换成vw和vh就能自动实现不同尺寸窗口元素缩放。）
缺点：1px线这种细致的样式是弱项；需要单独处理，特别是移动端。

参考文章：
web页面布局自适应解决方案