媒体查询生效的前提是正确声明viewport meta标签且置于head最前，否则所有基于视口宽度的查询均失效；应采用移动优先策略，用min-width向上增强，并依据内容实际撑开临界点设断点，同时支持orientation、resolution、prefers-color-scheme等多维度判断。
媒体查询本身不“适配”，真正起作用的是你写的样式逻辑是否匹配设备能力与用户行为；漏写 <meta name="viewport" content="width=device-width, initial-scale=1">，@media 规则基本等于没写。
viewport meta 标签必须写对，且放在 <head> 最前面
移动端浏览器默认以约 980px 宽度渲染页面，@media (max-width: 480px) 永远不会命中。没有这个 meta，所有基于视口宽度的媒体查询都失效。
- 必须写成
content="width=device-width, initial-scale=1"，不能是width=375或user-scalable=no（除非产品强要求） - 必须在所有 CSS 加载前声明，否则部分浏览器会先渲染再重排
- 检查 DevTools 的
Console：如果看到[Intervention] Unable to preventDefault inside passive event listener类提示，大概率是meta缺失或错位
用 min-width 做移动优先，别混用 min-width 和 max-width
写 @media (min-width: 768px) 比写 @media (max-width: 767px) 更可靠——边界值（比如 767.5px）、高 DPR 设备（如 iPhone 14 Pro 的 3x 缩放下视口宽度计算偏差）都容易让后者漏判。
- 基础样式写小屏（
320px起），再用min-width向上增强 - 断点按内容撑不开的临界点设：文字换行异常、按钮太挤、图片溢出，才是真实断点，不是照着 iPhone 型号硬套
- 同一套逻辑里混用
min-width和max-width，容易因层叠顺序或覆盖范围重叠导致意外交互
@media 必须顶层声明，不能嵌套在选择器内部
CSS 原生语法不支持在类名块里写 @media，像这样是无效的：
立即学习“前端免费学习笔记（深入）”；
.header {
background: #fff;
@media (min-width: 768px) { /* ❌ 错误 */
padding: 1rem;
}
}正确写法是把媒体查询提一层，包裹整个规则块：
@media (min-width: 768px) {
.header {
padding: 1rem;
}
}- PostCSS 或 Sass 的嵌套写法是编译时处理的，最终输出必须是合法 CSS
- 构建后检查产物，确认
@media是顶层声明，而非嵌套在某个 selector 内部 - 用 DevTools 的 Styles 面板验证：目标元素上是否真应用了媒体查询内的样式，而不是被更高优先级规则覆盖
别只盯着 width，横竖屏、DPR、深色模式都是可用维度
仅靠视口宽度做判断，在很多场景下不够用。比如 iPad 横屏时宽度超 1024px，但实际仍是平板体验；Retina 屏上 1px 边框会发虚；深色模式下颜色值需切换。
- 横竖屏：
@media (orientation: landscape)或(orientation: portrait) - 像素比：
@media (-webkit-min-device-pixel-ratio: 2)或更通用的(resolution: 2dppx) - 深色模式：
@media (prefers-color-scheme: dark)，配合:root变量可统一控制 - 这些条件可以 and 组合，比如
@media (min-width: 768px) and (prefers-color-scheme: dark)
最常被忽略的不是语法，而是 viewport 声明和断点设定依据——前者让媒体查询能运行，后者决定它有没有意义。
