vue中使用rem如何适配移动端

第一步

安装两个插件 屏幕自适应插件 npm i amfe-flexible --save 把px转成rem的插件 只能在css文件里面写 里面的 npm i postcss-pxtorem --save

第二步

在src目录新建rem文件夹,下面新建rem.js,添加如下代码:

//基准大小
const baseSize = 37.5
// 设置 rem 函数
function setRem() {
 const salepro = document.documentElement.clientWidth / 750
 // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改.
 // 设置页面根节点字体大小
 document.documentElement.style.fontSize = (baseSize * Math.min(salepro, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
 setRem()
}

第三步在项目根目录新建 postcssrc.config.js,添加代码如下:

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

第四步

在main.js中引入

import '@/rem/rem.js'