CSS字体大小重置问题：响应式font-size致rem尺寸混乱求助

核心问题 #

1. 缺少基础字体基准设置：当前仅在断点处定义html的font-size，但屏幕处于断点区间（如56.25em_75em、75em112.5em）时，html会使用浏览器默认的16px作为基准，导致rem值缩放比例混乱，字体大小跳变。
2. 媒体查询未覆盖全区间：部分屏幕尺寸没有对应规则，出现样式空白区。
3. Svelte组件样式冲突：slot引入的组件可能硬编码px字体大小，或scoped样式隔离导致全局html字体设置未生效。

修复步骤 #

1. 全局设置基础字体大小 #

在所有媒体查询前，先定义默认的html字体基准，推荐用62.5%（对应10px，方便rem计算：1rem=10px）：

html {
  font-size: 62.5%; /* 默认基准，1rem = 10px */
}

2. 调整媒体查询覆盖全区间 #

补充中间区间规则，确保从最小到最大屏幕都有对应缩放比例，同时保持max-width按从大到小排列（后定义的规则优先级更高）：

/* 超大屏（≥1800px） */
@media only screen and (min-width: 112.5em) {
  html {
    font-size: 65%; /* 1rem = 10.4px */
  }
}

/* 大屏（≤1200px） */
@media only screen and (max-width: 75em) {
  html {
    font-size: 59%; /* 1rem = 9.44px */
  }
}

/* 中屏（≤900px） */
@media only screen and (max-width: 56.25em) {
  html {
    font-size: 56%; /* 1rem = 8.96px */
  }
}

注：媒体查询的em基于浏览器默认字体大小（通常16px），75em=1200px、56.25em=900px、112.5em=1800px，转换稳定。

3. 优化body字体设置 #

将body的font-size改为rem单位，继承html的缩放比例，同时还原浏览器默认的16px大小：

body {
  box-sizing: border-box;
  position: relative;
  line-height: 1.5;
  font-family: 'Source Sans Pro', sans-serif;
  padding-top: 3.8rem;
  width: 100%; /* 替换100vw，避免横向滚动条 */
  font-size: 1.6rem; /* 对应16px，随html缩放 */
}

4. 排查Svelte组件样式 #

• 检查slot引入的组件内部，把硬编码的px字体大小改为rem；
• 若组件用了scoped样式，要么让字体样式继承全局设置，要么用:global()修饰符确保全局html样式生效：

  /* 组件内示例 */
  :global(html) {
    /* 穿透scoped样式，确保全局设置生效 */
  }
  .component-text {
    font-size: 1.4rem; /* 使用rem而非px */
  }
  

5. 验证效果 #

• 测试不同屏幕尺寸下的rem计算值，确认字体按比例缩放；
• 用浏览器开发者工具查看元素font-size的计算值，排查是否有局部样式覆盖全局设置。

内容的提问来源于stack exchange，提问作者Mulham Alamry