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();
完事!!