最常见原因是CSS优先级被覆盖或媒体查询条件未匹配当前视口，需检查viewport设置、断点单位语法、开发者工具Computed面板及视口实际宽度。
为什么 @media 写了但样式不生效
最常见原因是 CSS 优先级被覆盖，或者媒体查询条件没匹配上当前视口。比如写了 @media (max-width: 768px)，但浏览器窗口宽度是 769px，它就不会触发；又或者同一样式在普通选择器里已定义，且权重更高，@media 里的声明就被忽略了。
- 检查浏览器开发者工具的「Computed」面板，看目标样式是否被划掉，以及来源是否确实是你的媒体查询规则
- 确认
window.innerWidth（不含滚动条）或设备实际宽度符合你写的断点值 - 避免在
@media外部重复定义同一属性——否则外部规则可能因权重或顺序胜出 - 移动端要注意：默认 viewport 缺失会导致媒体查询按桌面宽度计算，务必加上
<meta name="viewport" content="width=device-width, initial-scale=1">
@media 中 min-width 和 max-width 的区别与陷阱
两者不是互斥关系，而是独立判断条件。比如 @media (min-width: 480px) 匹配所有 ≥480px 的宽度，@media (max-width: 768px) 匹配所有 ≤768px 的宽度；两者同时存在时，480–768px 区间会同时命中两个规则——如果它们设置了冲突属性，后出现的规则会生效（除非用 !important 或更高权重）。
- 推荐用「移动优先」写法：先写基础样式（小屏），再用
@media (min-width: 769px)覆盖大屏，逻辑更线性 - 避免混用
min-width和max-width定义同一组断点，容易漏掉边界（如768px可能两边都不中） - 若需精确控制某一段区间，用
@media (min-width: 480px) and (max-width: 768px)
如何调试 @media 是否被加载和匹配
光看样式表里有没有写对不够，得验证运行时行为。Chrome 和 Firefox 开发者工具都支持模拟设备和强制触发媒体查询。
- 在 DevTools 的「Toggle device toolbar」模式下，右上角可选预设尺寸，也可拖动调整，实时观察样式变化
- 在「Rendering」标签页（Chrome）或「Responsive Design Mode」设置中，勾选「Emulate CSS media features」，手动切换
prefers-color-scheme、hover等非尺寸类查询 - 临时加一条测试样式，比如：
@media (max-width: 768px) { body::before { content: "MOBILE ACTIVE"; position: fixed; top: 0; left: 0; background: red; color: white; padding: 4px; z-index: 9999; } }，能快速确认该断点是否进入
响应式断点没生效，可能是单位或语法写错了
CSS 媒体查询对单位和空格很敏感。比如 max-width:768px（冒号后没空格）在部分旧浏览器中可能被忽略；又比如用了 rem 或 % 单位——这是不允许的，width、height 类媒体特性只接受 px、em、vw 等绝对或视口单位，且 em 是相对于根元素字体大小计算的，容易误判。
立即学习“前端免费学习笔记（深入）”；
- 断点值统一用
px最稳妥，语义清晰，兼容性好 - 不要写
@media screen and (max-width: 768 px)（空格错位）、@media screen and max-width: 768px（缺括号） - 注意
screen是可选的，默认就是屏幕设备，但若写就必须带and连接，即@media screen and (max-width: 768px)
@media 规则是否被加载（Elements 面板里找）→ 最后看 Computed 面板里该属性是否被应用、被哪条规则覆盖。边界值（如 768px 正好卡在断点上）最容易被忽略。 
