[JavaScript知识库]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就是为了自适应效果，可以采用以下两种方法

不过要注意字体，这种方法是不能完全等比例缩小适配字体，存在最小字体，比如chrome最小字体为12px，小于这个值不会生效，依旧按12计算

1.媒体查询

使用媒体查询适配部分尺寸

@media screen and (max-width: 500px) {
  html {
    font-size: 12px;
  }
}

@media screen and (max-width: 320px) {
  html {
    font-size: 10px;
  }
}

2.使用js实时调整

比如在main.js增加resize监听，实时改变根元素的font-size

// main.js
window.addEventListener("resize", () => {
  const rootValue = 16;
  const scale = document.documentElement.clientWidth / 1920;
  document.documentElement.style.fontSize = rootValue * scale + "px";
});