最稳方式是用@media配合font-size，需将媒体查询置于CSS末尾、保持选择器一致、仅修改font-size及必要联动属性，并按内容挤叠点设三档断点（480px/768px/1024px），避免clamp()用于整站阶梯式响应。
直接用 font-size 配合 @media 是最稳、最可控的方式，其他方案（如 clamp()、CSS 变量、rem 根缩放）要么适用场景窄，要么容易翻车。
怎么写 media query 才不被覆盖？
媒体查询本身不提升选择器权重，它只是容器。失效通常是因为外部规则更具体或位置靠前。
- 把
@media块放在 CSS 文件末尾，确保不被前面同名类覆盖 - 别写
.title { font-size: 1.25rem; } @media (min-width: 768px) { .title { font-size: 1.5rem; } }这种松散结构——换成.title { font-size: 1.25rem; } @media (min-width: 768px) { .title { font-size: 1.5rem; } }，保持选择器一致 - 避免在断点里重复声明无关属性（比如颜色、margin），只改
font-size和必要联动项（如line-height） - 检查是否误用了
max-width：想在平板生效，却写了@media (max-width: 767px)，那只会作用于手机
断点值选多少才靠谱？
别抄设备分辨率表，按内容挤叠点来设。主流三档够用：
-
@media (min-width: 480px)：防小屏文字折行、按钮太挤（覆盖 iPhone SE 横屏等） -
@media (min-width: 768px)：平板竖屏最小可用宽度，此时可加大字号提升阅读舒适度 -
@media (min-width: 1024px)：桌面端起始，字号可再放大，但注意 2K/4K 屏别过大
每个断点的 font-size 建议按比例递增，例如：1rem = 14px → 16px → 18px → 20px，换算直观，设计师也容易对齐。
立即学习“前端免费学习笔记（深入）”；
能不能用 clamp() 替代 media query？
能，但只适合单个标题类元素的平滑缩放，不适合整站字体阶梯式响应。
-
h1 { font-size: clamp(1.5rem, 4vw, 2.5rem); }表示最小 1.5rem、最大 2.5rem、中间按 4vw 插值——小屏不挤、大屏不空 - 问题在于：设计师给的字号通常是离散值（14px → 16px → 18px），
clamp()会把中间段拉成斜线，视觉跳变不明确 - 旧版 Safari 对
clamp()支持不稳定，min和max可能被忽略 - 别拿它替代断点逻辑，尤其别用在正文段落上——可读性优先级高于“平滑”
Bootstrap/Tailwind 用户注意什么？
它们的字体工具类（如 fs-4、text-lg）本质也是 media query 封装，但行为有差异：
- Bootstrap 的
fs-*类支持断点后缀（fs-md-4），但fw-*和fst-*不支持——你写fw-md-bold是无效的，CSS 里根本没这个类 - Tailwind 的
text-base md:text-xl是从左到右层叠生效，必须按断点从小到大写，否则后面会覆盖前面；且md:对应@media (min-width: 768px)，手机竖屏（375px）压根不触发 - 两者都依赖根元素
font-size，如果项目里重置了html { font-size: 62.5%; }，所有rem值都会变，得同步检查
真正难的不是写断点，而是判断「这个字号变化是不是真有必要」——很多所谓“响应式字重切换”，其实该动的是布局或行高，而不是硬切 font-weight。
