vue-cli3 中使用rem布局

1. 装包postcss-px2rem及px2rem-loader

npm install postcss-px2rem px2rem-loader --save

2. 在根目录src中新建utils目录下新建rem.js等比适配文件,内容如下

1// rem等比适配配置文件
2// 基准大小
3const baseSize = 16
4// 设置 rem 函数
5function setRem () {
6  // 当前页面宽度相对于 1920宽的缩放比例，可根据自己需要修改。
7  const scale = document.documentElement.clientWidth / 1920
8  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
9  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
10}
11// 初始化
12setRem()
13// 改变窗口大小时重新设置 rem
14window.onresize = function () {
15  setRem()
16}

3.在main.js中引入适配文件

import ‘./utils/rem’

4.到vue.config.js中配置插件

1// 引入等比适配插件
2const px2rem = require('postcss-px2rem')
3
4// 配置基本大小
5const postcss = px2rem({
6  // 基准大小 baseSize，需要和rem.js中相同
7  remUnit: 16
8})
9
10// 使用等比适配插件
11module.exports = {
12  lintOnSave: true,
13  css: {
14    loaderOptions: {
15      postcss: {
16        plugins: [
17          postcss
18        ]
19      }
20    }
21  }
22}