项目使用脚手架搭建,使用了vantUI,因为第三方库都是使用的px单位,这时候再使用rem就没办法适配不同的屏幕了,所以就使用了px2rem-loader插件来解决这个问题。
第一步:安装
cnpm i lib-flexible --save
cnpm install px2rem-loader --save-dev
第二步:修改配置
在项目入口文件main.js中引入
import 'lib-flexible
找到build文件夹下的utils.js,添加以下配置:
var px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75 // (设计稿的宽度为 750 / 10)
}
}
然后重启npm即可。