媒体查询需浏览器实时检测视口宽度等条件后才应用样式，基本写法为@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 中行为不稳定），改用宽度判断更可靠。
立即学习“前端免费学习笔记（深入）”；
