正确写法是将移动端基础样式置顶，再用 min-width 递增断点；避免混用 max-width/min-width；逻辑符需规范空格；screen 类型慎用防拼错；优先用 clamp() 实现流体字体。
@media 里怎么写断点才不会被覆盖？
写错层叠顺序是导致断点失效最常见原因。浏览器按 css 加载顺序解析规则，后出现的 @media 规则会覆盖前面同选择器、同优先级的声明。
- 把移动端基础样式写在最前面，再用
@media (min-width: 768px)往上加宽屏规则 - 避免混用
max-width和min-width描述同一设备区间（比如同时写(max-width: 767px)和(min-width: 768px)），边界值容易漏掉 1px - 调试时打开 DevTools 的「Toggle device toolbar」，手动拖动宽度看哪条规则生效——别只信预设尺寸
and / or / not 这些逻辑符怎么用才不报错？
它们不是 JavaScript 那套写法，不能写成 && 或 ||，也不能省略空格；而且 not 只能修饰整个媒体查询，不能只否定某一项。
-
@media (min-width: 480px) and (orientation: landscape)✅ 正确：两个条件都满足 -
@media (min-width: 480px) and (max-width: 767px), (min-width: 1024px)✅ 正确：逗号表示 or，匹配任一条件组 -
@media not (prefers-reduced-motion: reduce)✅ 正确：否定整个括号内表达式 -
@media (not (min-width: 480px))❌ 错误：括号嵌套不合法，浏览器直接忽略整条规则
为什么加了 screen 类型反而不生效？
screen 是默认类型，显式写出来本身没错，但一旦拼错（比如写成 scrren）或加了多余空格（如 screen and 前多一个空格），整个媒体查询就会被浏览器静默丢弃——连控制台都不报错。
- 检查是否误写为
print、speech等非当前环境支持的类型 - 移动端调试时注意：部分安卓 webview 对
screen类型识别不稳定，可尝试省略它直接写@media (min-width: ...) - 若用 postcss 或构建工具自动注入前缀，确认它没把
screen改成其他值
响应式字体大小用 rem + @media 还是直接用 clamp()？
两者都能实现流体缩放，但思路不同：@media 是离散断点，clamp() 是连续插值。现在主流浏览器都支持 clamp()，且更少出错。
立即学习“前端免费学习笔记（深入）”；
-
font-size: clamp(1rem, 2.5vw, 1.5rem);—— 浏览器自动在 1rem 到 1.5rem 之间按视口宽度线性计算 - 用
@media实现同样效果得写至少 3 段，还可能在断点间隙出现跳变 - 注意
clamp()的三个参数顺序固定：最小值、首选值、最大值；写反会导致字体突然变极小或极大 - 旧版 safari（clamp()，如需兼容，得回退到
@media+rem方案
实际项目里最容易被忽略的是 @media 查询的“作用域”——它只影响其内部声明的选择器，不会改变外部 CSS 的层叠上下文或继承链。调了半天发现字体没变，结果是忘了在 @media 块里重写那个 font-size。