在现代网页开发中，确保设计在不同设备上保持一致性是一项重要挑战。本文介绍的等比缩放技术提供了一种优雅的解决方案，通过动态调整根字体大小来实现整体布局的比例缩放。

技术原理与实现

这段代码的核心思想是基于视口宽度与设计稿宽度的比例关系动态调整CSS变量。代码首先定义了设计稿的基准宽度(1920px)和基础字体大小(16px)，然后通过setHtmlFontSize函数计算当前视口宽度与设计稿宽度的比例，并据此调整根元素的字体大小。

// 设计稿的基准宽度（根据你的设计稿修改这个值）
const DESIGN_WIDTH = 1920; // 例如设计稿是1920px宽
const DESIGN_BASE_FONT_SIZE = 16; // 设计稿中html的基准font-size

function setHtmlFontSize() {
    // 获取当前窗口宽度
    const windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

    // 计算比例（当前宽度与设计稿宽度的比值）
    const ratio = windowWidth / DESIGN_WIDTH;

    // 计算新的font-size（保持与设计稿的比例关系）
    const newFontSize = DESIGN_BASE_FONT_SIZE * ratio;

    // 设置CSS变量
    document.documentElement.style.setProperty('--html-ratio', `${newFontSize}px`);
}

// 初始化时设置一次
setHtmlFontSize();

// 窗口大小改变时重新计算
window.addEventListener('resize', setHtmlFontSize);

这种方法的巧妙之处在于利用了CSS的rem单位特性。当开发者使用rem作为长度单位时，所有尺寸都会相对于根元素的字体大小进行缩放。通过动态调整这个基准值，整个页面的元素都能按比例缩放，保持与原始设计的一致性。

参考示例：

https://10.1pxeye.com/docs/rem-based-website

手机效果可扫描下方二维码：