在移动web开发之自适应布局解决方案一: less+媒体查询+rem这个文章里我们学习了自适应的第一种方案，但我们发现这种方法太麻烦，还要我们自己去计算每个元素的rem值，于是我们可以用flexible.js可以解决这一痛点。这是手机淘宝团队推出的移动端适配库，我们再也不用写不同屏幕的媒体查询了，因为这个库做了js处理，其原理是将当前设备划分为10等份，但是不同屏幕设备下，比例还是一致的，我们要做的就是确定好我们当前设备的html字体大小即可，比如设计稿是750px，那么我们就把html字体大小设置为75px(750px/10),页面元素rem值就等于页面元素的px值/75,如果设计稿是640px，那html字体大小就是64(640px/10),页面元素rem值就等于页面元素的px值/64,剩余的让flexible.js去计算。flexible.js在github上的下载地址是:https://github.com/amfe/lib-flexible下载完后解压后的文件夹里内容如下:
vscode插件安装
vscode编辑器安装px转rem的插件cssrem,只需要搜索cssrem安装即可。
这个插件默认的html字体大小为cssroot 是16px,需要我们自己前去设置我们想要的html字体大小，安装此插件后可以将px自动计算出rem，非常方便。注意的是，此插件默认html根元素字体大小为16px，假如说设计稿是750px，然后用flexible.js划分10等份的话，75px=1rem，那么此时我们需要在vscode的设置里将其设置成75，如果设计稿是640px，用flexible.js划分10等份，64px=1rem，此时vscode里需设置成64。vscode设置步骤:点击设置-搜索cssroot-找到"cssrem.rootFontSize"左侧的编辑里的复制到设置，在右侧修改，左侧不能修改哦。重启vscode生效哦
部分代码截图如下:
vue项目里使用flexible.js做移动端适配
1.安装lib-flexible,命令如下:
npm install lib-flexible --save
2.在项目入口文件main.js里引入lib-flexible
import 'lib-flexible/flexible.js'
需要注意的两点:检查html文件的head中是否有默认的head标签，如果有head需要将其注释掉或直接删除掉，因为我们在安装flexible.js之后就会自动生成meta name="viewport"达到适配，如果不将默认的head标签注释那就会造成lib-flexible就会使用默认的head标签。第二个要注意的是，因为html字体大小font-size是根据屏幕宽度除以10计算出来的，所以我们要设置页面最大宽度为10rem