页面自适应lib-flexible使用

1.安装flexible

npm install lib-flexible --save

2.引入flexible

在项目入口文件main.js中添加如下代码，引入flexible

import 'lib-flexible'

3.px 转 rem

使用 webpack 的 px2rem-loader,自动将px转换为rem

4.安装px2rem-loader

npm install px2rem-loader --save

5.配置px2rem-loader

在vue-cli生成的文件中,找到以下文件 build/utils.js,如下图添加配置

const cssLoader = { loader: 'css-loader', options: { //这一行为加上去的 minimize: process.env.NODE_ENV === 'production', sourceMap: options.sourceMap } } //这段为加上去的 const px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 192 //根据视觉稿，rem为px的十分之一，移动端使用750/10为75，PC端使用1920/10为192 } }