设计宽度375

方式一：

HTML 设置 viewport：

<meta name="viewport" content="width=device-width, initial-scale=1">

动态设置根字体大小

function setRem() {
  const baseWidth = 375;
  const html = document.documentElement;
  const width = html.clientWidth;
  html.style.fontSize = (width / baseWidth) * 16 + 'px';
}
setRem();
window.addEventListener('resize', setRem);

代码中CSS 用 rem 单位开发：

.button {
  width: 6.25rem;   /* 100px / 16 */
  height: 2.5rem;   /* 40px / 16 */
  font-size: 1rem;  /* 16px */
}

方式二：设计宽度375，代码中写px，会自动转成rem

vite使用postcss-pxtorem

npm install postcss-pxtorem --save-dev

新建一个文件postcss.config.js

// postcss.config.js
export default {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*'],
      selectorBlackList: ['.no-rem'],
      exclude: /node_modules/i
    }
  }
}

写代码到main.ts或其他地方(不写的话postcss就没有参照)

<script>
  (function () {
    const baseSize = 37.5;
    function setRem() {
      const scale = document.documentElement.clientWidth / 375;
      document.documentElement.style.fontSize = baseSize * scale + 'px';
    }
    window.addEventListener('resize', setRem);
    setRem();
  })();
</script>