媒体查询需浏览器实时检测视口宽度等条件后才应用样式，基本写法为@media screen and (max-width: 768px)，须写screen、括号、单位和and；移动端优先推荐min-width向上增强；断点应依内容体验而定，非设备尺寸；兼容性上IE11不支持部分特性，现代可选container queries；调试宜用DevTools媒体查询面板或matchMedia API验证。
media query 的基本写法和触发条件
媒体查询不是“自动适配”，而是靠浏览器实时检测视口宽度、设备像素比等条件，匹配成功后才应用对应样式。最常用的是 @media screen and (max-width: 768px) 这类写法，注意三点：必须写 screen（否则可能被打印样式表干扰），括号内是布尔表达式，and 不能省略，max-width 指的是视口（viewport）宽度，不是设备物理宽度。
常见错误包括：@media (max-width: 768) 缺单位（必须写 px 或 em），@media max-width: 768px 漏掉 @media 和括号，或把 min-width 和 max-width 范围写反导致断点重叠或遗漏。
移动端优先与断点设计的实际取舍
推荐从移动设备开始写基础样式，再用 @media (min-width: 768px) 向上增强。这样避免在小屏设备加载大量无用的桌面端 CSS，也更符合渐进增强逻辑。断点不要硬套“iPhone 宽度”或“iPad 分辨率”，而应根据内容溢出、行宽过长、按钮太小等实际体验问题来定。
- 文字过小难读 → 加大
font-size，用rem配合根字体缩放 - 导航栏换行或遮挡 → 改为汉堡菜单，需配合 JS 切换
display状态 - 两列卡片挤成一列还留白过多 → 用
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))替代固定列数
常见兼容性陷阱与现代替代方案
IE11 及更早版本不支持 min-resolution、hover 媒体特性，也不支持 rem 在 font-size 外的多数场景；Safari 旧版对 aspect-ratio 媒体查询完全不识别。若需兼容 IE，避免使用 orientation: landscape（它在 iOS Safari 中行为不稳定），改用宽度判断更可靠。
立即学习“前端免费学习笔记（深入）”；
现代项目可考虑用 container queries 替代部分 media query 场景，但注意它目前只作用于有 container-type 的父容器，且不响应视口变化——它是“组件级响应”，不是“页面级响应”。
调试时如何快速验证 media query 是否生效
Chrome DevTools 的“设备模拟器”里切换尺寸只是改视口，不一定触发 media query（比如你写了 @media (min-width: 1024px) 却把模拟器拉到 1023px，就不会命中）。更稳妥的方式是：
- 在 DevTools 的 Styles 面板中，勾选 “Show all media queries” 查看当前激活的规则
- 临时加一条
body { outline: 2px solid red !important; }到某个 media block 内，看是否亮起边框 - 用
window.matchMedia("(max-width: 768px)").matches在 Console 手动检查匹配结果
别依赖设计稿标注的“768px 断点”就直接写死，真实用户会缩放页面、横竖屏切换、用分屏模式——media query 生效与否，只取决于那一刻的 document.documentElement.clientWidth。
