媒体查询只是条件开关，真正起作用的是样式逻辑是否匹配设备能力；viewport标签必须正确置于head最前且含width=device-width和initial-scale=1，否则@media失效。
媒体查询本身不“适配”，它只是条件开关；真正起作用的是你写的样式逻辑是否匹配设备能力与用户行为。漏写 viewport、断点设错、混用 min-width 和 max-width，@media 就等于没写。
viewport meta 标签必须加，且不能写错
浏览器判断的是视口（viewport）宽度，不是设备物理宽度。没这个标签，移动端默认按 980px 渲染，@media (max-width: 480px) 永远不会触发。
- 最简有效写法：
<meta name="viewport" content="width=device-width, initial-scale=1"> - 禁止写成
content="width=375"或带user-scalable=no——后者会禁用双指缩放，影响可访问性 - 必须放在
里，且在所有 CSS 加载前 - 如果用了
maximum-scale=1.0，iOS Safari 会强制禁用字体放大，低视力用户无法调整文字大小
断点优先用 min-width，按内容临界点设
别硬套 iPhone 型号（比如 @media (max-width: 375px)），同一张图在 iPhone SE 和 Pixel 7 上需要的裁剪焦点可能完全不同。真正该关注的是：文字开始换行、按钮挤在一起、图片溢出容器——这些才是真实断点。
- 移动优先：默认写小屏样式（如
font-size: 14px），再用@media (min-width: 768px)向上增强 -
min-width: 768px比max-width: 767px更可靠，避免在 767.5px 这类非整数宽度下漏判 - 避免混用
min-width和max-width在同一套逻辑里，容易覆盖冲突 - 典型三端断点建议：
768px（平板起）、1024px（桌面起），但需以内容撑不开为依据微调
@media 不能嵌套在选择器内部
CSS 原生不支持在类名里写 @media，像这样是无效的：
.header {
background: #fff;
@media (min-width: 768px) { /* ❌ 错误：CSS 不允许 */
padding: 1rem;
}
}
正确写法是把媒体查询提一层，包裹整个规则块：
@media (min-width: 768px) {
.header {
padding: 1rem;
}
}
- PostCSS 或 Sass 的嵌套语法是编译时处理的，最终输出仍是合法 CSS
- 检查构建产物，确认生成的 CSS 里
@media是顶层声明 - 用 DevTools 的 Styles 面板验证：目标元素上是否真应用了媒体查询内的样式
别只盯着 width，横竖屏、DPR、深色模式都得考虑
仅靠宽度断点远远不够。横竖屏差异大时，加 and (orientation: landscape) 分支；高 DPR 设备（如 Retina）要适配图像资源；深色模式下颜色值也得切换。
- 横竖屏示例：
@media (min-width: 768px) and (orientation: landscape) { .sidebar { display: none; } } - DPR 示例：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .logo { background-image: url(logo@2x.png); } } - 深色模式示例：
@media (prefers-color-scheme: dark) { :root { --bg: #1a1a1a; --text: #eee; } } -
object-fit和object-position必须配对生效；调试时临时加outline: 1px solid red看容器真实尺寸
最容易被忽略的，是 viewport 标签的位置和内容完整性——它不在 最前，或漏了 initial-scale=1，后面所有媒体查询都会失效。另外，min-width 断点一旦设在内容实际撑开的临界点之外，样式就只是“看起来像适配”，实则在某些设备上仍会错位或溢出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
