vue项目中使用Rem做适配

1.下载postcss-pxtorem插件

npm install postcss-pxtorem --save-dev

2.package.json文件内配置postcss

{
  "name": "",
  "version": "",
  "private": ,
  "scripts": {
    ...
  },
  "dependencies": {
   ...
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 75, // 换算的基数(设计图750的根字体为75)
        "propList": [
          "*"
        ]
      }
    }
  },
  "devDependencies": {
  ...
  }
}

引用rem.js

src/assets/setRem.js

const setRem = () => {
  const html = document.documentElement
  const width = html.getBoundingClientRect().width
  html.style.fontSize = width / 10 + 'px'
}
setRem()
window.addEventListener('orientationchange', setRem)

main.js中全局引用

import './assets/js/setRem'
上一篇:Vue ——lib-flexible + postcss-pxtorem 简单实现rem适配


下一篇:使用postcss-plugin-px2rem和postcss-pxtorem(postcss-px2rem)-px自动转换rem的配置方法-vue-cli3.0