vue lib-flexible font-size失效 及 移动端适配原理

新建项目想使用lib-flexible插件完成屏幕自适应后，设置remUnit：192（设计稿为1920px）后，发现不管在什么尺寸下的屏幕下font-size都为54px，rem也就失去意义了，搜索引擎查了一圈也没看到什么解决方案，只好老老实实看源码了，结果发现对屏幕大小做了限制，大于540px的屏幕一律按540处理了，注释掉这段即完美解决~

刚面试了几次，发现这个设备适配被问到的概率很大，大概10次里问了7，8次这样，于是自己结合网上的解释自己捋了捋原理

首先rem这个单位是以根节点(html标签)字体大小作为参考的，根节点的font-size默认16px （一般默认14px，有的16px，这里我喜欢16所以取16px hhhhh~）此时1rem=16px。为了测试，我们修改根节点字体大小为20px，document.getElementByTagName('html')[0].fontSize=20,此时1rem就变成了20px。UI提供给我的设计稿是750px的，所以在开发时我修改配置的根节点字体基准为75px。这时候我们设置的比例系数就是 htmlwidth(屏幕宽度)/fontSize(根节点字体大小)=10 。然后按照设计稿上的尺寸编写代码，这时用的单位px，编译时会使用px2rem插件将px转化为rem。例如我们设置div{width:150px} 这时编译后的文件里为 div{width:2rem}。在设备适配的过程中插件会获取屏幕宽度，并且按照比例把根节点字体大小调整成相同比例 ，例如iphone6的屏幕宽度htmlwidth=320px，此时根据先前设置的比例系数 10 插件会将根节点字体大小设置成 320/10 = 32px ，相对应的div的宽度就变为64px，即32px(根节点大小)*2rem(插件转化的rem值)=64px。使得同一个div在不同的尺寸下都有对设计稿的良好还原。 

总结一下 移动端适配的原理 就是 先按照设计稿开发，并设置比例系数，从而生成固定的rem单位样式。监听设备屏幕宽度，按照比例系数（系数值随意设置）设置相应的根节点字体大小，从而在不同设备上实现样式自适配