rem这是个低调的css单位，由于兼容性的局限性，rem只用于移动端开发，rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个px字号，则可以来算出元素的宽高，元素的宽高可以随着屏幕的分辨率等自适应，所以rem用来做web app绝对是最合适的页面自适应解决方案之一。
在实际项目中，我们的设计稿都是以px为单位，在开发中我们必须将px转换为rem单位，要是全部转换，这大量的计算量，哪怕是sublimeText 的cssrem插件，也是一个庞大的工作量，这里分享一个基于vue-cli的px自动转rem单的自适配方案。
第一步： 安装lib-flexible模块
npm install lib-flexible --save
第二步：在项目中引入lib-flexible
在项目入口文件main.js中添加如下代码，引入flexible
import 'lib-flexible'
第三步：安装px2rem-loader
npm install px2rem-loader
第四步：配置px2rem-loader
在build文件中找到util.js(build/utils.js)，将px2rem-loader添加到cssLoaders中，remUnit为设计稿的宽度，如下：
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75 //这里设置设计稿的宽度，750设置成75
}
}
然后，在generateLoaders方法中添加px2remLoader
function generateLoaders (loader, loaderOptions) {
const loaders = [cssLoader,px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
第五步：设置meta标签。
通过meta标签，设置设备宽度以及缩放比例。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
第六步：重启，搞定。
npm run dev
源码
转换后
本文暂时没有评论，来添加一个吧(●'◡'●)