媒体查询本身不“适配”，真正适配靠样式逻辑匹配设备能力与用户行为；viewport meta 标签漏写或错误会导致媒体查询失效，必须声明 width=device-width；优先用 min-width 移动优先，断点应按内容临界点设定，避免混用 min/max-width；媒体查询不可嵌套于选择器内，需顶层声明；除宽度外，横竖屏、dpr、深色模式等维度同样关键。
媒体查询本身不“适配”，它只是条件开关；真正适配靠的是你写的样式逻辑是否匹配设备能力与用户行为。没写对规则、没设对断点、漏了 viewport，@media 就是摆设。
viewport meta 标签漏写或写错，媒体查询直接失效
这是最常被忽略的前置条件：媒体查询判断的是视口（viewport）宽度，不是设备物理宽度。如果没声明 <meta name="viewport" content="width=device-width, initial-scale=1">，移动端浏览器会以 980px 左右默认宽度渲染，@media (max-width: 480px) 永远不会触发。
- 必须放在
里，且在所有 CSS 加载前 - 不要写成
content="width=375"或user-scalable=no（除非产品强制要求） - 缩放相关属性（如
minimum-scale）会影响用户交互，慎用
min-width 还是 max-width？优先用 min-width 做移动优先
用 @media (min-width: 768px) 比 @media (max-width: 767px) 更可靠。前者是“从小到大逐步增强”，后者容易在边界值（比如 767.5px）或高 DPR 设备上漏判，而且多个 max-width 规则叠加时，覆盖顺序难控制。
- 默认样式写小屏（320px 起），再用
min-width向上增强 - 断点别硬套 iPhone 型号，按内容撑不开的临界点设——比如文字换行异常、按钮太挤、图片溢出，才是真实断点
- 避免混用
min-width和max-width在同一套逻辑里，易引发意外交互
媒体查询不能嵌套在选择器内部
CSS 原生不支持在类名里写 @media，像这样是无效的：
.header {
background: #fff;
@media (min-width: 768px) { /* ❌ 错误：CSS 不允许 */
padding: 1rem;
}
}
正确写法是把媒体查询提一层，包裹整个规则块：
.header {
background: #fff;
}
<p>@media (min-width: 768px) {
.header {
padding: 1rem;
}
}</p>
- PostCSS 或 Sass 的嵌套语法是编译时处理的，最终输出仍是合法 CSS
- 检查构建产物，确认生成的 CSS 里
@media是顶层声明 - 用 DevTools 的 Styles 面板验证：目标元素上是否真应用了媒体查询内的样式
别只盯着 width，横竖屏、像素比、深色模式都是可用维度
单纯靠宽度断点已经不够。真实场景中，这些媒体特性常被忽略但影响显著：
-
@media (orientation: landscape)：视频页、表格页需横屏时调整布局 -
@media (-webkit-min-device-pixel-ratio: 2)或@media (resolution >= 2dppx)：为高清屏单独提供 @2x 图标或更细边框 -
@media (prefers-color-scheme: dark)：配合:root变量切换主题色，比 JS 检测更轻量、更早生效 - 多个条件组合用
and，比如@media (min-width: 768px) and (prefers-reduced-motion: reduce)
真机调试时，Chrome DevTools 的 Device Toolbar 只模拟尺寸，不模拟 DPR 或深色偏好；要验证这些，得用真机 + 开发者模式开启对应系统设置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
