废话不多说直接上步骤：
1、安装 flexible和 px2rem-loader（命令行安装）
px2rem-loader（自动将px转换为rem）
npm install lib-flexible --save npm install px2rem-loader --save
2、引入lib-flexible
在项目入口文件main.js 中引入lib-flexible
import 'lib-flexible'
3、去掉目标文件的index.html头里的meta标签。
<meta name="viewport" content="width=device-width, initial-scale=1.0"> //不要写上边这行meta，flexible会为根据屏幕自动给我加上，如果你自己加了， 那么flexible会根据你加的值来计算，也就会出现固定的值，安卓和苹果都会一样了。data-dpr有可能是固定的了
4、配置px2rem-loade
在bulid文件下的utils.js文件下
const cssLoader = { loader: 'css-loader', options: { minimize: process.env.NODE_ENV === 'production', sourceMap: options.sourceMap } } const px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 75 //1rem=多少像素 这里的设计稿是750px。 } } function generateLoaders (loader, loaderOptions) { const loaders = options.usePostCSS ? [cssLoader, px2remLoader] : [cssLoader] ... }
OK，到此结束。配置就这么简单，但是用起来可能有点小问题，看下文...
px2rem 用法：
安装px2rem后，再使用px上有些不同，大家可以参考px2rem官方介绍，下面简单介绍一下。
直接写px，编译后会直接转化成rem ---- 除开下面两种情况，其他长度用这个 在px后面添加/*no*/，不会转化px，会原样输出。 --- 一般border需用这个 在px后面添加/*px*/,会根据dpr的不同，生成三套代码。---- 一般字体需用这个
示例代码
编译前（自己写的代码）
.selector { width: 150px; height: 64px; /*px*/ font-size: 28px; /*px*/ border: 1px solid #ddd; /*no*/ } 安卓的data-dpr=1,iphone6,iphone5默认dpr为2，6plus，iphone7,8,x均为3
编译后（打包后的代码）
.selector { width: 2rem; border: 1px solid #ddd; } [data-dpr="1"] .selector { height: 32px; font-size: 14px; } [data-dpr="2"] .selector { height: 64px; font-size: 28px; } [data-dpr="3"] .selector { height: 96px; font-size: 42px; }
实例效果：
安卓手机效果图.png
苹果手机效果图.png
注意：坑1、
不能在index.html的头部加 name 为 viewport 的 meta 标签，flexible会自动为我们添加！
注意：坑2、对外部引入css，px2rem能不能转换rem问题
本项目没有遇到，但是网络上有人反映，如果出现，可以试试别人的方法，如下
在vue-cli生成的文件中,找到以下文件 build/utils.js,如下图添加配置：
px2rem能不能转换rem问题.jpg
当然了，如果你得项目能够正常转换，那就没必要这样设置了。（当你的项目不能转换时候，试试此方法，本人没有试过）
注意：坑3、想一想，如果我们如果引入了第三方框架，他们的样式是另一套写法，样式会被flexible转换，就会破坏框架的样式，这个怎么解决呢？
如下：
比如我有个项目引入了mint-ui框架，也引入了他们的样式，但是在页面了会被转换
555.png
我们可以看到，实际效果图里我们已经把他们的样式强制装换成了rem，效果也不是我们想要的了（比默认的小了很多）
这个问题我也在找答案，如果你有好的办法可以@我，或者留言。
总结：如果是自己开发项目的话，不引入第三方的样式ui库，flexible的确方便的多，设置好后直接安照设计稿的原始像素大小写页面。
