Flexible.Js+vscode 配合使用，解决手机端（h5页面）rem单位的适配

Flexible.Js+vscode 配合使用，解决手机端（h5页面）rem单位的适配

首先感谢网络上发布Flexible.Js相关信息和教程的大神们，由于你们让我更加了解Flexible.Js的使用。

Flexible.Js 这个js我知道的时候其实很早，再找手机框架的时候，就遇到过，记得是和淘宝相关，当然也使用了几个小时，后面因为是不了解他的具体使用，就没有再管了，导致后面我写的手机站都是用百分比来操作，如果遇到需要定位或者是背景图片，元素对齐的时候，我就很难进行操作，虽然做的是企业网站，但是如果遇到麻烦的网站百分比搭建就会出现很多的兼容，位置错位，换行等问题，后面遇到了rem单位，也具体了解过rem单位的原理，也使用了一段时间，但是还是没有那么顺手，结果到后面我写的页面单位用的就比较杂，百分比和rem和px 都有，简单的手机站勉强看得过去，复杂的就出现很多问题。当然手机框架我也使用，比如bootstrap  Weiui 等前端框架，还有大神发布的单位换算的js ,但是我总是会遇到这种，那种的问题，结果没有办法，再继续网络找框架

没有想到的是，绕了一圈又绕回到Flexible.Js上，原理我说的不专业，我就只说一点，我切图的方式和电脑端一样。

首先手机端的页面是750px,  640px宽度的页面，

然后开始写代码，个人建议使用vscode 编辑器，因为他有个插件，可以自动换算单位，这个插件叫cssrem插件 操作如下
打开vs

安装好之后要进行一个操纵（重要）修改软件默认字体的大小，首先找到软件底部的齿轮，找到设置，搜索框里面输入 cssroot  会显示用户和工作区 这里的数值要怎么修改呢，如果您的效果图是750，那这里就改成75，如果是640这里就改成64（原因简单来说就是要让rem单位换算正确）

如果都设置好了，那我们就开始写代码了，（前提简单的就说了，直接开始）

Js 引用

Css 样式相信大家都是写了，这里我们看下vs 的插件是如何切换单位的

 

https://github.com/amfe/lib-flexible  js文件地址

感谢课程
https://www.bilibili.com/video/BV1J7411W7wq?p=26   （重点感谢）