使用CSS clamp()实现流体响应式标题不随视口缩放问题咨询

架构老林

2026-8-28

修复方案

核心问题排查

你写的clamp()语法本身是正确的，字号不随视口缩放的最常见原因是HTML头部缺少视口配置meta标签。
缺少该标签时，浏览器会使用默认的固定宽度虚拟视口（通常为980px）计算vw等视口相对单位，不会跟随实际窗口/设备宽度变化，直接导致clamp()的流体计算值失效。
在HTML的<head>标签内补充以下代码即可解决基础问题：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

如果补完标签仍不生效，打开浏览器开发者工具，选中对应标题元素，在「计算样式（Computed）」面板检查font-size属性，确认是否有其他更高优先级的样式（比如浏览器默认样式、插件注入样式、后续加载的CSS规则）覆盖了你写的clamp()规则，删除冲突规则即可。

并排布局优化

你当前使用inline-block实现标题并排的方案存在两个小问题：一是行内块元素之间会存在默认的空白间隙，二是视口过窄时容易出现内容溢出。推荐改用flex布局实现，稳定性更高：

body {
  margin: 0;
  /* 自定义字体要加兜底字体族，避免加载失败时排版崩溃 */
  font-family: istok-web, system-ui, sans-serif;
  font-style: normal;
}
.gohd {
  display: flex;
  align-items: baseline; /* 两个标题按文字基线对齐，排版更自然 */
  gap: 1rem; /* 控制两个标题的间距 */
  flex-wrap: wrap; /* 视口宽度不足时自动换行，避免内容溢出 */
  padding: 1rem;
}
#gfhd {
  margin: 0; /* 清除h1标签默认的上下外边距 */
  font-size: clamp(1.5rem, 5vw, 6rem);
}
#gdsbhd {
  margin: 0; /* 清除h2标签默认的上下外边距 */
  font-size: clamp(1rem, 5vw, 3rem);
}