移动web开发之自适应布局解决方案二: flexible.js+rem

在移动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࿰