最常遇到的问题是viewport缺失或错误导致媒体查询未触发，以及单位混用（如rem依赖的根字号未同步调整）；需确保meta viewport正确、统一用:root+rem方案、慎用clamp()与js动态设置冲突。
media query 中 font-size 不生效的常见原因
最常遇到的问题不是写错语法，而是底层条件没满足。比如 @media (max-width: 768px) 根本没触发，往往是因为缺失或写错 <meta name="viewport">。没有这行，移动端浏览器默认以 980px 宽度渲染，768px 断点永远不匹配。
另一个高频陷阱是单位混用：在 :root 设了 font-size: 16px，又在媒体查询里给 p 写 font-size: 0.875em。这时实际计算仍基于旧的根字号，视觉变化微弱甚至不可见。
- 必须把
<meta name="viewport" content="width=device-width, initial-scale=1">放在最前面，不能靠 JS 动态插入 - 所有响应式字体应统一基于
:root的font-size调整，子元素只用rem引用 - Chrome DevTools 的 “Computed” 面板里直接看最终
font-size值，确认是否被更高优先级规则覆盖
用 :root + media query 控制全局字号缩放
这是最稳定、易维护的方案。核心是只改一次根字号，所有 rem 自动响应，避免逐个选择器写断点。
注意断点值推荐用 em（如 48em）而非像素，这样当用户放大系统字体时，断点也会同比例偏移，保持相对关系。
- 基础设置：
:root { font-size: 16px; } - 小屏适配：
@media (max-width: 48em) { :root { font-size: 14px; } } - 大屏强化：
@media (min-width: 80em) { :root { font-size: 18px; } } - 不要在媒体查询里给
body或具体容器设font-size，会干扰rem继承链
clamp() 替代多层 media query 的实操要点
clamp() 不是媒体查询的增强版，而是另一种思路：用单条声明实现平滑插值。但它对写法敏感，写错就退化成固定值。
典型错误是 clamp(14px, 2.5vw, 18px) —— 这完全脱离根字号控制，无法和 rem 缩放联动；而 clamp(0.875rem, 4vw, 1.125rem) 才能随 :root font-size 变化同步缩放。
- 第一项（最小值）和第三项（最大值）建议用
rem，确保与全局基准一致 - 中间项用
vw提供弹性，但系数要测试：iPhone SE 上4vw约等于 12px，可能过小；建议从2.5vw起调 - 旧版 Safari 不支持
clamp()，需用@supports包裹并提供remfallback - 别在同一个选择器里既写
clamp()又写媒体查询调整同一属性，容易冲突导致字体忽闪
移动端 Safari 字体发虚或强制缩放怎么办
这不是 CSS 写错了，而是 Safari 主动干预文本渲染。即使 rem 计算精准，它仍可能放大低字号文字或残留双击缩放状态。
关键修复不在字体本身，而在两个地方：-webkit-text-size-adjust 和 viewport 的 user-scalable 设置。
- 必须加 CSS 重置：
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } -
<meta>中慎用user-scalable=no：它禁用双指缩放，但会让视力障碍用户无法放大，合规场景建议保留可缩放 - iOS Safari 横屏切换时可能不触发
resize事件，若用 JS 动态设置根字号，需额外监听orientationchange - 避免给
body设固定font-size，它会切断rem继承源头
document.documentElement.style.fontSize，又写了媒体查询去改 :root，结果内联样式压倒 CSS 规则，断点形同虚设。这类问题不会报错，只会在特定设备上悄悄失效。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
