必须添加<meta name="viewport" content="width=device-width, initial-scale=1.0">，否则移动端按桌面宽度渲染导致媒体查询失效；推荐统一用min-width断点（如768px），避免与max-width混用引发覆盖冲突。
media query 怎么写才不会在手机上失效
直接用 @media screen and (max-width: 768px) 很容易出问题——很多安卓浏览器或微信内置 WebView 会忽略它，除非你漏了关键的 <meta name="viewport"> 标签。没有这行，移动端永远按桌面宽度渲染，媒体查询就形同虚设。
必须加在 <head> 里：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 缺
width=device-width→ 手机强制以 980px 宽度渲染，max-width: 768px永远不触发 -
initial-scale=1.0不写 → 页面可能被缩放，导致视口宽度计算错乱 - 不要写
user-scalable=no（尤其金融/表单类页面），会破坏可访问性，且 iOS Safari 16+ 已限制该属性生效
用 min-width 还是 max-width？看断点设计逻辑
主流框架（如 Bootstrap）用 min-width 是因为“移动优先”：基础样式写默认（小屏），再用 @media (min-width: 768px) 逐步增强；而用 max-width 是“桌面优先”，适合老项目渐进改造。
两者不能混用同一套断点值，否则会覆盖冲突。例如：
立即学习“前端免费学习笔记（深入）”；
@media (max-width: 767px) { .box { width: 100%; } }
@media (min-width: 768px) { .box { width: 50%; } }
这样写没问题；但如果你写成：
@media (max-width: 768px) { .box { width: 100%; } }
@media (min-width: 768px) { .box { width: 50%; } }
在 768px 这个精确宽度下，两个规则都匹配，CSS 后写的会生效（取决于源码顺序），但行为不可控。
- 推荐统一用
min-width，断点设为768px、992px、1200px，对应常见设备逻辑宽度 - 避免用
480px、320px这类过时断点——现代 iPhone 竖屏逻辑像素已是 390px / 430px，靠设备像素比（dpr）适配更可靠 - 用
em替代px写断点（如(min-width: 48em)）能更好兼容用户修改浏览器默认字号的场景
媒体查询里能用 calc() 或 CSS 变量吗
可以，但有边界：calc() 在媒体查询条件中**只支持长度单位运算**，比如 (min-width: calc(50vw + 10px)) 是合法的；但 calc(1rem + 1em) 会报语法错误，因为单位不兼容。
CSS 自定义属性（变量）在媒体查询条件中**完全不可用**——下面这句无效：
@media (min-width: var(--breakpoint-md)) { ... }
变量只能用在媒体查询块内部的声明里：
:root { --gap: 16px; }
@media (min-width: 768px) {
.grid { gap: var(--gap); }
}
- 想动态控制断点？得用 JS 配合
window.matchMedia()，CSS 层面做不到 - 避免嵌套媒体查询（如
@media (prefers-color-scheme: dark) { @media (min-width: 768px) { ... } }），部分旧版 Safari 会解析失败 -
hover媒体特性在触摸设备上行为不稳定，iOS Safari 默认返回hover: none，别拿它当“是否是桌面”的判断依据
为什么加了 media query 还是没响应？检查这三处
最常踩的坑不是语法错，而是环境或加载链路问题：
- CSS 文件用了
media="print"属性引入：<link rel="stylesheet" href="style.css" media="print">→ 媒体查询再全也白搭，浏览器根本不会解析该文件的屏幕样式 - 样式被
!important锁死在基础规则里，后续媒体查询里的同名属性无法覆盖（尤其是从第三方 UI 库继承的样式） - 使用了 CSS-in-JS 库（如 styled-components），但没启用 SSR 的媒体查询支持，服务端首屏渲染时没注入对应规则，导致初始 HTML 缺少响应式样式
调试建议：打开 Chrome DevTools → 切到「Rendering」面板 → 勾选「Emulate CSS media type」或「Emulate vision deficiencies」，快速验证不同上下文是否命中规则。
