-
下载lib-flexible
项目使用的vue-cli+webpack,所以使用npm进行安装npm i lib-flexible --save
-
引入lib-flexible
在main.js中引入lib-flexibleimport 'lib-flexible/flexible'
-
设置meta标签
在项目根部的index.html中,通过meta标签,设置设备宽度以及缩放比例<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
安装px2rem-loader
npm install px2rem-loader
-
配置px2rem-loader
在build文件中找到util.js,将px2rem-loader添加到cssLoaders中,如:const cssLoader = { loader: 'css-loader', options: { minimize: process.env.NODE_ENV === 'production', sourceMap: options.sourceMap } } const px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 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
})
})
}
```
- 最后重启项目OK
npm run dev