vue3+vite+postcss+vm实现屏幕自适应

1、安装 postcss-pxtorem 插件

npm install postcss-pxtorem

2、新增postcss.config.js的文件， module.exports = {

  plugins: {

    "postcss-pxtorem": {

      rootValue: 16, //跟基准

      propList: ["*"],

    },

  },

};

3、html下写入公共样式　

html {
  font-size: 16px;
}
@media screen and (min-width: 375px) {
  html {
    /* 375px 作为 16px 基准，414px 宽度时正好对应 18px 的根字号大小 */
    font-size: calc(16px + 2 * (100vw - 375px) / 39);
  }
}
@media screen and (min-width: 414px) {
  html {
    /* 屏幕宽度从 414px 到 1000px，根字号大小累积增加 4px（18px-22px） */
    font-size: calc(18px + 4 * (100vw - 414px) / 586);
  }
}
@media screen and (min-width: 1000px) {
  html {
    /* 屏幕宽度从 1000px 往后每增加 100px，根字号大小就增加 0.5px */
    font-size: calc(22px + 5 * (100vw - 1000px) / 1000);
  }
}