Vue3+vant+ts H5 移动端适配

1.安装postcss-pxtorem插件

npm i postcss-pxtorem

2.配置postcss.config.cjs文件

//postcss.config.cjs文件

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 16,
      propList: ['*'],
    },
    tailwindcss: {},
    autoprefixer: {},
  },
};

3.在App文件里 根据屏幕变化 做响应式布局

/**响应式布局 */
  const setHtmlFontSize = () => {
    const htmlDom = document.getElementsByTagName('html')[0];
    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
    if (htmlWidth >= 750) {
      htmlWidth = 750;
    }
    if (htmlWidth <= 160) {
      htmlWidth = 160;
    }
    htmlDom.style.fontSize = `${htmlWidth / 23.4375}px`;
  };
  window.onresize = setHtmlFontSize;
  setHtmlFontSize();

4.拖动窗口大小，测试屏幕适配是否生效