使用rem布局时怎样合理设置根标签字体大小？

设置html根标签字体大小是rem布局的核心。合理的设置方式取决于你的设计稿尺寸和目标设备范围，以及你希望如何简化计算。以下几种常见方法：

1. 简单易懂的 10px 法（不推荐）：

   设置 html { font-size: 62.5%; }，这使得 1rem 等于 10px (因为浏览器默认字体大小是 16px， 16 * 62.5% = 10px)。

   • 优点： 计算方便，1rem 就是 10px，直接将设计稿的 px 值除以 10 就是 rem 值。
   • 缺点： 用户无法通过浏览器设置调整字体大小，影响网页的可访问性，这是最大的问题，所以不推荐这种方法。

2. 灵活的媒体查询法（推荐）：

   根据不同的视口宽度设置不同的 html 字体大小。 这是目前主流也是推荐的方案。

   html { font-size: 16px; } /* 默认字体大小 */
   
   @media (min-width: 320px) { html { font-size: calc(100vw / 375 * 16px); } }
   @media (min-width: 375px) { html { font-size: 16px; } }
   @media (min-width: 414px) { html { font-size: calc(100vw / 414 * 16px); } }
   @media (min-width: 768px) { html { font-size: calc(100vw / 768 * 16px); } }
   @media (min-width: 1024px) { html { font-size: calc(100vw / 1024 * 16px); }  }
   /* ...根据需要添加更多断点 */
   

   • 优点： 适配不同屏幕尺寸，页面元素大小会随着屏幕宽度等比例缩放，更灵活，兼容性好，用户可以根据需要调整字体大小。
   • 缺点： 需要编写多个媒体查询，略微增加了代码量。

3. 使用 JavaScript 动态计算（推荐）：

   使用 JavaScript 动态计算 html 的 font-size。

   function setRem() {
     const baseSize = 16; // 基准字体大小
     const designWidth = 750; // 设计稿宽度
     const viewportWidth = document.documentElement.clientWidth || window.innerWidth;
     const fontSize = viewportWidth / designWidth * baseSize;
     document.documentElement.style.fontSize = fontSize + 'px';
   }
   
   setRem();
   window.onresize = setRem;
   

   • 优点： 更加灵活，可以根据实际情况进行更精细的控制，例如可以设置最大最小字体大小限制。
   • 缺点： 需要 JavaScript 代码，稍微增加了复杂度。

选择哪种方法？

• 对于简单的项目，并且设计稿宽度固定，可以使用媒体查询法，选择几个关键的断点即可。
• 对于复杂的项目，或者需要更精细的控制，建议使用 JavaScript 动态计算 font-size。

一些额外的建议：

• 设计稿宽度: 选择一个主流的设备宽度作为设计稿宽度，例如 750px (iPhone 6/7/8)。
• 基准字体大小: 通常选择 16px 作为基准字体大小。
• 最大最小字体限制: 在 JavaScript 动态计算时，可以设置最大最小字体限制，避免字体过大或过小。
• px 和 rem 结合使用: 对于一些不需要缩放的元素，例如边框、阴影等，可以直接使用 px 单位。

希望以上信息能帮助你! 选择最适合你项目的方法，并根据实际情况进行调整。