font-size 在 media query 中失效的常见原因包括：父容器字体设置与 em/rem 继承冲突、viewport meta 标签缺失、单位混用、line-height 和 letter-spacing 未同步响应；推荐统一用 rem 并在 :root 上调整，或使用 clamp() 实现平滑缩放。
font-size 在 media query 中为什么没生效
常见原因是父容器设置了 font-size 且子元素用 em 或 rem，而 media query 里只改了某一层的字体，但继承链没断开或单位混用。比如根元素 :root 设了 16px，又在 @media (max-width: 768px) 里给 p 设 0.875em，实际是按旧的根字号计算，视觉变化微弱。
更稳妥的做法是统一用 rem，并在 media query 中直接调整 :root 的 font-size，让所有依赖它的元素批量响应：
:root {
font-size: 16px;
}
@media (max-width: 768px) {
:root {
font-size: 14px;
}
}
@media (max-width: 480px) {
:root {
font-size: 12px;
}
}
-
rem基于根元素，避免嵌套层级干扰 - 不要在 media query 中混用
px和em修改同一类文本，容易叠加失效 - Chrome DevTools 的 “Computed” 面板里看
font-size最终值，确认是否被更高优先级规则覆盖
viewport meta 标签缺失导致 media query 失效
没有 ，移动端浏览器会以桌面视口（通常 980px）渲染页面，@media (max-width: 768px) 根本不会触发。
这个标签必须放在 最前面，且不能被 JS 动态插入（部分 iOS 版本不识别）：
<meta name="viewport" content="width=device-width, initial-scale=1">
- 安卓 WebView、微信内置浏览器对
initial-scale=1敏感，漏掉会导致缩放错乱 - 如果用了
user-scalable=no，测试时记得手动双指缩放验证是否真禁用了 - 某些 CMS（如 WordPress 主题）会自动注入 viewport，检查源码确认是否重复或冲突
clamp() 替代多层 media query 实现平滑缩放
写三四个 media query 控制字体，维护成本高，且在断点之间是阶跃变化。用 clamp() 可声明一个响应式范围，浏览器自动插值：
h1 {
font-size: clamp(1.5rem, 4vw, 2.5rem);
}
上面这行表示：最小 1.5rem，最大 2.5rem，中间按视口宽度的 4vw 线性过渡。实际效果是小屏不挤、大屏不空、中屏刚好。
-
clamp(min, preferred, max)三个参数必须同单位类型（都用rem或都用vw，不能混px和em） - Chrome 88+、Firefox 79+、Safari 14.1+ 支持；旧版 Safari 需加
-webkit-clamp()前缀（但已废弃，不推荐降级） - 慎用于段落正文——
vw在超宽屏（如 3840px）下可能让文字过大，建议用max-width限制容器宽度来兜底
line-height 和 letter-spacing 必须同步响应
只调 font-size 容易让行高塌陷或字间距发散。比如 font-size 缩到 14px 时，若 line-height: 2 不变，行距会显得过大；而 letter-spacing: 1px 在小字号下会明显拉开字距。
推荐用无单位 line-height（如 1.5），它会随字体等比缩放；letter-spacing 则用 em 单位锚定字宽比例：
p {
font-size: 1rem;
line-height: 1.6;
letter-spacing: 0.02em;
}
@media (max-width: 768px) {
:root {
font-size: 0.875rem;
}
}
- 无单位
line-height是乘数，不是固定像素，天然响应字体变化 -
letter-spacing: 0.02em表示“当前字体大小的 2%”，比0.5px更稳定 - 图标字体（如 Font Awesome）若用
font-size控制大小，也要同步检查其line-height是否撑开容器
实际项目里最常被忽略的是 font-size 和 line-height 的耦合关系——改一个不调另一个，文字块在小屏上要么堆叠要么飘空。先定好根字号节奏，再用 clamp() 或 media query 批量驱动，比零敲碎打调每个标题更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
