最近做的一个项目，使用了postcss来动态调整fontsize的大小，使用rem来让页面比例保持一致，配置如下：

// vite.config.js
css: {postcss: {plugins: [postcssPxtorem({rootValue: 192, // UI设计稿的宽度/10unitPrecision: 3, // 转rem精确到小数点多少位propList: ['*'], // 需要转换的属性 *表示所有selectorBlackList: ['ignore'], // 不进行px转换的选择器replace: true, // 是否直接更换属性值，而不添加备用属性mediaQuery: false, // 是否在媒体查询的css代码中也进行转换minPixelValue: 0, // 设置要替换的最小像素值}),]}},

// main.js
const setRootFontSize = () => {let screenWidth = document.documentElement.clientWidth || document.body.clientWidth;let rootFontSize = screenWidth / 10;document.documentElement.style.fontSize = rootFontSize + 'px';
};window.addEventListener('load', setRootFontSize);
window.addEventListener('resize', setRootFontSize);

由于ui出图是按照1920 * 1080的比例出的，所以我在配置的时候rootValue是192，在配置完成之后，页面的大小样式比例是正常的，开发的时候也都没有问题，但是在浏览器刷新当前页面的时候，会有一瞬间的极小页面出现，然后才是正常比例的页面显现

这个问题困扰了我整个开发过程，到最后查了一下，发现只需要在全局的css文件中配置上font-size的样式即可

html {font-size: 0;
}

原因分析了话，应该就是main.js在页面初始化阶段可能还没有被执行，这个时候整个page的font-size应该是默认的192px，那我们给它配置成0了话，这个时候页面在初始化阶段就不会出现了，初始化完成就直接展示出正常的页面了