Vue3项目中：autoprefixer和postcss-pxtorem的组合使用

autoprefixer是自动补全css3前缀的库

postcss-pxtorem是将px换算为rem的库

此次主要针对PC端

项目环境：

        vue-cli4

        vue3

        less

安装依赖

yarn add -D postcss 
yarn add -D postcss-pxtorem 
yarn add -D autoprefixer

项目根目录下新建 postcss.config.js 文件

module.exports = {
  plugins: {
    "postcss-pxtorem": { // 把px单位换算成rem单位
      rootValue: 16, //换算基数， 默认100  ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多上px了。
      unitPrecision: 5, //允许REM单位增长到的十进制数字,小数点后保留的位数。
      propList: ['*'],
      // exclude: /(node_module)/,  //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
      selectorBlackList: ['.radius'], //要忽略并保留为px的选择器
      // mediaQuery: false,  //（布尔值）允许在媒体查询中转换px。
      minPixelValue: 5 //设置要替换的最小像素值(3px会被转rem)。 默认 0
    },
    'autoprefixer': {
      overrideBrowserslist: [
        "Android 4.1",
        "iOS 7.1",
        "Chrome > 31",
        "ff > 31",
        "ie >= 8"
        //'last 2 versions', // 所有主流浏览器最近2个版本
      ],
      grid: true
    }
  }
}

在src/utils下新建rem.ts文件

function setRem() {
  // 基准大小
  const baseSize = 16 //浏览器默认字体大小16px
  const baseScale = baseSize / 1920 // 针对PC端，1920的设计图。 移动端的对应调整为750或者375
  const widthScale = window.innerWidth // 当前窗口的宽度
  // const heightScale = window.innerHeight // 当前窗口的高度
  // 尺寸换算-根据宽高比率取最小缩放比-目前不考虑高度
  // const comparedHeight = (widthScale * 1080) / 1920
  // if (heightScale < comparedHeight) {
  //   widthScale = (heightScale * 1920) / 1080
  // }
  // 计算实际的rem值,得到该宽度下的相应font-size值,并赋予给html的font-size,
  const rem = widthScale * baseScale
  document.documentElement.style.fontSize = rem + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = () => {
  setRem()
}

实现原理：项目开发样式尺寸根据1920固定填写，项目构建的时候，将px样式根据16px=1rem比例转换为rem样式，当浏览器窗口尺寸改变，动态调整根元素font-size尺寸，根据rem*fontSize动态生成px尺寸。

启动项目，可以在控制台看到样式都自动补充了前缀，尺寸都是rem的。

 

 

注意事项：

网上很多autoprefixer和postcss-pxtorem配置，单独配置呢分别生效，要是两者组合一起放到vue.config.js内用，发现不生效，经过测试，放到postcss.config.js文件可以。