安装
Vue-cli使用的2.x
npm install px2rem-loader
或者 yarn add px2rem-loader
webpack配置
在项目的/build/utils中配置
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 37.5,
remPrecision: 2
}
}
并在 generateLoaders 中添加 px2remLoader
配置如下:

最终utils配置文件如下, remUnit 指的是设计稿/10 ,比如iphone6的375/10,即1rem=37.5px;
设置好后重新运行即可。
建议结合 lib-flexible
npm i lib-flexible
或者yarn add lib-flexible
然后在main.js中引入lib-flexible
import 'lib-flexible/flexible'
关于retina屏幕1px像素问题
例如设置border-bottom:1px solid #ddd;这里不希望他转变成rem
可以如下 border-bottom:1px solid #ddd; /*no*/
No Comments