頁面自適應lib-flexible使用

https://www.jianshu.com/p/8e5d2ef6ccea

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
   }
 }