2021-06-01

pxtorem进行移动端适配

在基于umi.js搭建的目录config.js中

extraPostCSSPlugins: [
    pxtorem({
      rootValue: 100, //这里根据设计稿大小配置,一般是375
      propList: ['*'],
      selectorBlackList: ['.am-', '.norem-'], // 过滤掉.am-开头的class，不进行rem转换
    }),
  ],

rem是基于root根元素的fontsize大小来计算的
所以不同的移动设备，屏幕宽度不一样，对应的根元素的fontsize也要同比变化，以实现自适应

所以需要实现初始化根节点fontsize的方法

export function initRem(): void {
  const docEle = document.documentElement;
  function setHtmlFontSize() {
    let deviceWidth = docEle.clientWidth || window.innerWidth;
    if (deviceWidth >= 450) {
      deviceWidth = 450;
    }
    if (deviceWidth <= 320) {
      deviceWidth = 320;
    }
    const fontSize = deviceWidth / 7.5;
    docEle.style.fontSize = fontSize.toFixed(3) + 'px';
  }
  setHtmlFontSize();
  window.addEventListener('resize', setHtmlFontSize);
}

在app.js/app.ts中，引用调用该initRem方法

import { initRem} from '@/utils/rem';
initRem();

完事！！