html的字体大小

默认字体大小与基准值

HTML 元素默认字体大小由浏览器决定，通常为 16px（如桌面浏览器），可通过 html 元素的 font-size 属性全局调整基准值，

html {
  font-size: 16px; / 1rem = 16px /
}

常用单位与示例

特殊关键字

• inherit：继承父元素字体大小。

  h1 { font-size: inherit; } / 与父元素相同 /

• initial：重置为浏览器默认值（通常是 16px）。

  p { font-size: initial; }

响应式设计中的注意事项

1. 移动端适配：
   使用 rem 或 em 配合媒体查询，

   @media (max-width: 768px) {
     body { font-size: 14px; } / 根字体缩小 /
   }

2. 用户自定义设置：
   用户通过浏览器设置调整字体大小时，rem 和 em 会动态缩放，而 px 固定不变。

浏览器兼容性

• 基准值差异：部分浏览器默认 html 字体大小为 16px，但可能因系统或用户设置变化。
• 解决方案：显式设置 html 的 font-size，

  html { font-size: 62.5%; } / 使 1rem = 10px，便于计算 /

最佳实践

1. 优先使用 rem：便于全局控制，适配响应式布局。
2. 避免固定 px：除非明确需要像素级精度（如图标字体）。
3. 层级管理：通过 em 实现组件内比例缩放，避免过深嵌套导致计算复杂。

相关问题与解答

问题 1：为什么推荐使用 rem 而非 px？

解答：
rem 基于根元素字体大小，可全局统一调整（如通过媒体查询适配不同设备），而 px 是固定值，无法响应用户自定义字体设置或动态布局需求，且在高分辨率屏幕上可能导致可读性问题。

问题 2：如何修复字体大小继承导致的层级错位？

解答：
若子元素因 em 或 继承导致字体过大/过小，可通过以下方式重置：

1. 直接指定具体单位（如 px 或 rem）：

   .child { font-size: 14px; } / 覆盖继承 /

2. 使用 rem 统一基于根元素：

   .parent { font-size: 1.2rem; }
   .child { font-size: 1rem; } / 基于根元素而非父元素 /