vue开发PC端响应式项目

便于开发

目的： 设计稿1920尺寸，达到响应式。如果设计稿上是75px，那么代码中也直接写上75px

第一步，配置postcss-pxtorem

安装

# 安装
$ yarn add postcss-pxtorem
---
# 在vue.config.js中配置
css: {
  loaderOptions: {
    postcss: {
      plugins: [
        require('postcss-pxtorem')({
          rootValue: 192, // 换算的基数
          selectorBlackList: [], // 忽略转换正则匹配项
          propList: ['*']
        })
      ]
    }
  }
}

第二步，调用一下方法

可以直接copy在app.vue的mounted中

    function setDocumentRem () {
      const html = document.documentElement
      const wW = html.clientWidth// 窗口宽度
      const rem = wW / 10   // 基准值
      document.documentElement.style.fontSize = rem + 'px'
    }
    // 初始化
    setDocumentRem()
    // 改变窗口大小时重新设置 rem
    window.onresize = function () {
      setDocumentRem()
    }