h5移动端px适配

• px：是分辨率的尺寸单位
• em：相对于父元素
• rem：相对于HTML根元素
• vw：视口宽度的 1/100，vh：视口高度的 1/100

设置根节点html字体大小 根据设备的屏幕宽度设置根元素的字体大小

1. 这一步完成之后再cs中使用rem将根据根元素的字体大小进行调整 如需将px 转成vw使用需要增加# 动态设置 REM 单位

function setRem(): void {
    const docEl = document.documentElement;
    const dpr = window.devicePixelRatio || 1;
    function setBodyFontSize(): void {
      if (document.body) {
        document.body.style.fontSize = `${12 * dpr}px`;
      } else {
        document.addEventListener('DOMContentLoaded', setBodyFontSize);
      }
    }
  
    setBodyFontSize();
    function setRemUnit(): void {
      const rem = docEl.clientWidth / 10; 
      docEl.style.fontSize = `${rem}px`;
    }
  
    setRemUnit();
    window.addEventListener('resize', setRemUnit);
    window.addEventListener('pageshow', (e) => {
      if (e.persisted) {
        setRemUnit();
      }
    });
  
    // 检测 0.5px 边框支持
    if (dpr >= 2) {
      const fakeBody = document.createElement('body');
      const testElement = document.createElement('div');
      testElement.style.border = '.5px solid transparent';
      fakeBody.appendChild(testElement);
      docEl.appendChild(fakeBody);
      if (testElement.offsetHeight === 1) {
        docEl.classList.add('hairlines');
      }
      docEl.removeChild(fakeBody);
    }
  }
  
  export default setRem;
  

px转vw 创建postcss.config.cjs

npm install autoprefixer postcss-px-to-viewport-8-plugin --save-dev 在css中使用px后会转换成vw适配

module.exports = {
  plugins: [
    require('autoprefixer')({
      overrideBrowserslist: ['> 1%', 'last 2 versions', 'Firefox ESR', 'not dead']
    }),
    require('postcss-px-to-viewport-8-plugin')({
      unitToConvert: 'px',
      viewportWidth: 375,
      unitPrecision: 5,
      propList: ['*'],
      viewportUnit: 'vw',
      fontViewportUnit: 'vw',
      selectorBlackList: ['.ignore', '.hairlines'],
      minPixelValue: 1,
      mediaQuery: false,
      replace: true,
      exclude: [/node_modules/]
    })
  ]
};

在 postcss.config.cjs 中配置了 postcss-px-to-viewport-8-plugin 插件，并希望将 px 转换为 rem，你需要移除 postcss-px-to-viewport-8-plugin 插件，并改为使用 postcss-pxtorem 插件。

module.exports = {
  plugins: [
    require('autoprefixer')({
      overrideBrowserslist: ['> 1%', 'last 2 versions', 'Firefox ESR', 'not dead']
    }),
    
    require('postcss-pxtorem')({
      rootValue: 37.5, // 根元素字体大小，通常是 16
      unitPrecision: 5, // 转换后的精度，即小数点位数
      propList: ['*'], // 需要转换的属性列表，'*' 表示所有属性
      selectorBlackList: ['.ignore', '.hairlines'], // 需要忽略的选择器
      replace: true, // 替换包含 px 的属性，而不是添加备用属性
      mediaQuery: false, // 允许在媒体查询中转换 px
      minPixelValue: 1 // 设置要替换的最小像素值
    }),

  ]
};