vue 适配移动端 假设设计图是375
第一步 安装 lib-flexible
npm i lib-flexible --save
第二步 安装 px2rem-loader
npm install px2rem-loader --save-dev
第三步 引入lib-flexible
import 'lib-flexible/flexible'
第四步 最重要的一步 配置utils文件
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 37.5
}
}
//在generateLoaders方法中添加px2remLoader
const loaders = [cssLoader,px2remLoader]
ps:npm的安装命令--save是将包装到package.json的dependencies 而--save-dev是将包装到package.json的devDependencies中
第一个相当于是安装插件 第二个是安装依赖包
注意!!:如果是750的设计图需要将第四步的remUnit替换成750 这样生成出来的比例就是1rem=100px
最后测试下。。
测试没问题
来源:oschina
链接:https://my.oschina.net/u/4370628/blog/4407296