h5页面的移动端适配

手上在做的h5需要投放在移动端，首先需要考虑如何尺寸适配，一比一的复制设计稿

postcsspxtorem是一个移动端适配方案，可以自动在打包编译时将项目中的px属性转为rem，适配各种宽度尺寸的机型，其原理是在css预处理的阶段将px转换为rem，实现适配

App.vue

首先指定页面字体大小，这个大小决定了页面长度为多少rem

  // 获取浏览器宽度
  let htmlWidth =
    document.documentElement.clientWidth || document.body.clientWidth;
  console.log(htmlWidth);
  //得到html的Dom元素
  let htmlDom = document.getElementsByTagName("html")[0];
  // 设置根元素字体大小
  if (htmlWidth >= 450) {
    htmlDom.style.fontSize = 22 + "px";
  } else {
    // 设置页面宽度整体为20rem
    htmlDom.style.fontSize = htmlWidth / 20 + "px";
  }
}
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem();
};

vite.config.ts

配置1rem对应的多少px，实际上使得设计稿上的像素大小等于写在css里的px

export default defineConfig({
  plugins: [vue()],
  css: {
    postcss: {
      plugins: [
        postCssPxToRem({
        // 设置转换比，设计稿宽度750rpx,页面宽度20rem，1rem==37.5px,就可以使1px等于设计稿的1rpx
          rootValue: 37.5, 
          propList: ["*"],
        }),
      ],
    },
  },
}