前言
系统上线后部分用户布局有问题，系统的整个内容都拉到屏幕下面去了，整改意见需要搞个屏幕适配。
什么是rem
说到适配，第一想法就是直接使用rem适配方案，那么什么是rem，先简单说下什么是rem。 rem（font size of the root element）是指相对于根元素的字体大小的单位。 1rem等于根元素 html 的 font-size，即只需要设置根元素的 font-size，其它元素使用rem 单位时，会自动根据根元素的font-size计算出具体的大小
实现原理(1rem等于html的font-size大小)
只要html的font-size变化了，那么设置了rem的大小也会随之改变，所以使用rem是通过动态设置html的font-size来改变width或height的值，从而实现网页自适应，一般移动端会根据屏幕宽度来适配。
计算根元素的font-size
接下来准备开干，因为是网页端的系统，内容比较多，很多内容由于高度不够被挤占到下面，所以这次我们需要做的是根据浏览器内容高度来适配，那么我们需要根据高度来计算html的font-size,由于已经有很多现成的库能实现这个功能，我们就选用amfe-flexible，但是看看源码发现这个根据宽度来适配计算的，好在内容也不多，直接吧源码拿出来，稍微改动一下只需要把clientWidth改成clientHeight即可，根据高度来计算根元素的font-size，
1.根据dpr设置body的font-size
其实这个库主要就做了两件事，上面setBodyFontSize是根据当前的设备像素比给body设置一个合适的font-size，因为很多时候不是每个元素的字体我们都会给它设置，那么没有设置的字体默认就会使用body的font-size，所以如果不设置，可能会导致没有设置字体的文字会非常大。
dpr
额外补充(代码中dpr=物理像素/设备独立像素)
PC端 —— 1个设备独立像素 = 1个物理像素 （在100%，未缩放的情况下，如果缩放到200%可以说1个设备独立像素 = 2个物理像素）
2.动态计算根元素的font-size
第二部分就是setRemUint，根据当前的浏览器高度设置根元素html的font-size，并监听浏览器尺寸变化来实时更新这个font-size
执行完上述代码后，在网页上检查下我们计算得到的font-size，如图所示
所有px转化成rem
完成了第一步，但是发现问题又来了，代码里的宽高以及很多字体都是px写死的，如果要手动改成rem工作量还有点大，于是直接拿来现成的轮子postcss-pxtorem，这个插件帮助开发者在构建过程自动将px转换为rem，然后再通过配置postcss.config.js文件，如下图，按照标准屏1920*1080，高度1080/10=108 设置为1rem。
最后把系统重新跑一遍，使用控制台修改下浏览器的宽高，发现可以完美适配，打开元素检查，发现原来的px都已经自动转化成rem展示了，大功告成！
