function setRem() {
const designWidth = 1920; // UI设计稿宽度
const designHeight = 1080; // UI设计稿高度
const htmlWidth =
document.documentElement.clientWidth || document.body.clientWidth;
const htmlHeight =
document.documentElement.clientHeight || document.body.clientHeight;
const htmlDom = document.getElementsByTagName("html")[0];
const widthRatio = htmlWidth / designWidth;
const heightRatio = htmlHeight / designHeight;
const fontSize = Math.min(widthRatio, heightRatio) * 16; // 假设 1rem = 16px
htmlDom.style.fontSize = fontSize + "px";
}
window.addEventListener("resize", setRem);
setRem();
设计稿的宽度和高度分别设为 1920px 和 1080px。首先,函数获取当前窗口的宽度和高度,然后计算宽度和高度的比例。接着,函数取这两个比例中的较小值,并将其乘以 16px(假设 1rem 等于 16px),得到新的字体大小。最后,将计算出的字体大小应用到 HTML 文档的根元素上。