手把手教你如何在vue项目中使用rem布局

npm i lib-flexible

在main.js（入口）中引入js文件 ---  
import 'lib-flexible/flexible.js'

//比如设置p标签字体大小为24px

p {
	font-size:2.4rem
}

//安装 postcss-pxtorem
npm i postcss-pxtorem -s

//兼容处理
function sethtml() {
    //获取设备宽度
    var deviceWidth = document.documentElement.offsetWidth;
    //给html标签设置fontSize，就是给rem赋值
    document.documentElement.style.fontSize = deviceWidth / 375 * 10 + 'px';
}

//窗口大小变化的时候执行
window.onresize = setHtml;
//页面初始加载时也要触发
setHtml();

module.exports = {
 "plugins": {
 "postcss-pxtorem": {
  "rootValue": 37.5,
  "propList": ["*"]
 }
 }
}

import '@/rem/rem.js'

html {
    font-size: 10px;  // 相当于1rem = 10px
}

body {
    font-size: 16px;
}