vue使用postcss-pxtorem px转rem

1.安装postcss-pxtorem

postcss-pxtorem是Postcss的插件，所以同时也要安装Postcss

postcss-pxtorem使用更高版本可能会导致 Error: PostCSS plugin postcss-pxtorem requires PostCSS 8. 这里使用了5.1.1可以避免这个错误

// package.json 其他依赖这里略过
{
  "devDependencies": {
    "postcss": "^8.3.11",
    "postcss-pxtorem": "5.1.1",
  }
}

---

2.根目录下增加配置 postcss.config.js

更多配置和详情见postcss-pxtorem github

// postcss.config.js
module.exports = {
  plugins: {
    "postcss-pxtorem": {
      rootValue: 16, //结果为：设计稿元素尺寸/16，比如元素宽320px,最终页面会换算成 20rem
      propList: ["*"],
      minPixelValue: 1, //px小于1的不会被转换
      selectorBlackList: ["html"],
    },
  },
};

---

3.尺寸自适应

使用rem就是为了自适应效果，可以采用以下两种方法

不过要注意字体，这种方