通过 JS 根据屏幕宽度自动设置 1rem 的大小

本示例代码以屏幕宽度 1920 为基础，根据屏幕缩放比例自动调整 1rem 的大小。

    function setRemUnit() {
      // 基准宽度和对应的 1rem 大小
      const baseWidth = 1194; // 基准宽度
      const baseFontSize = 16; // 在基准宽度下 1rem 对应的 px 值
      // 获取当前屏幕宽度
      const currentWidth = window.innerWidth;
      // 计算新的 1rem 大小
      const newFontSize = (currentWidth / baseWidth) * baseFontSize;

      // 设置 HTML 根元素的字体大小
      document.documentElement.style.fontSize = `${newFontSize}px`;
    }

    // 页面加载时调用一次
    window.addEventListener("load", setRemUnit);

    // 监听窗口大小变化，以便在用户调整浏览器窗口大小时重新计算
    window.addEventListener("resize", setRemUnit);