postcss-px2rem简单使用

1. public/index.html下

<script>
    const baseSize = 100 // 基准值
    function setRem() {
      // 相对于1920像素的缩放比
      let scale = document.documentElement.clientWidth / 1920
      // 根据屏幕变化 1rem 对应的 font-size
      scale = scale > 1 ? 1 : scale;
      const realFont = baseSize * scale
      document.documentElement.style.fontSize = realFont + 'px'
    }
    setRem()
    window.onresize = () => {
      setRem()
    }
</script>

2. 下载 postcss-px2rem

	npm install postcss-px2rem -D

3.在vue.config.js中配置

const px2rem = require('postcss-px2rem')

const postcss = px2rem({
  remUnit: 100 // 基准值
})

module.exports = {
  publicPath: './',
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          postcss
        ]
      }
    }
  }
}

4. 在.vue中使用px，会自动转化为rem

.home {
  font-size: 25px; // --> font-size: 0.25rem; (25 / 基准值)
}