2024-06-24-【工程化】H5兼容&适配处理.md

H5 屏幕适配方案

• 百分比、rem、vw/vh、media

1. rem 按设计稿宽度设置 font-size

• 关键点在于 docEl.style.fontSize = 10 * (clientWidth / 750) + "px";;750 代表设计稿当前宽度按 750px 计算，10 代表 750 宽度下默认 font-size 为 10px，便于计算。

(function (doc, win) {
  const docEl = doc.documentElement,
    resizeEvt = "orientationchange" in win ? "orientationchange" : "resize",
    recalc = function () {
      const clientWidth = docEl.clientWidth;
      if (clientWidth === undefined) return;
      // 设置 根元素html的font-size
      docEl.style.fontSize = 10 * (clientWidth / 750) + "px";
    };
  if (doc.addEventListener === undefined) return;
  // 监听窗口改变
  win.addEventListener(resizeEvt, recalc, false);
  // 初始HTML加载和解析完成时
  doc.addEventListener("DOMContentLoaded", recalc, false);
})(document, window);

2. vw/vh

• 工具包 postcss-px-to-viewport 编译时转换 px 为 vw、vh

npm install postcss-px-viewport postcss-viewport-units postcss-preset-env -D

• vite.config.js 配置

import pxtovw from 'postcss-px-to-viewport';
...

// 设计稿按750px设计
const loaderPxtovw = pxtovw({
  viewportWidth: 750,
  viewportUnit: 'vw',
  exclude: [/node_modules\/tdesign/i, /node_modules\/@gt4/i],
});
// tdesign按375px设计
const tdesignPxtovw = pxtovw({
  viewportWidth: 375,
  // viewportHeight: 1334,
  viewportUnit: 'vw',
  selectorBlackList: ['.t-picker'],
  exclude: [/^(?!.*node_modules\/(?:tdesign|@gt4))/],
});

export default defineConfig({
  ...
  css: {
    postcss: {
      plugins: [loaderPxtovw, tdesignPxtovw],
    },
  },
  ...
})