媒体查询本身只是开关，真正起作用的是样式逻辑是否匹配设备能力；漏写viewport、断点设错或混用min/max-width会导致@media失效，而viewport标签必须正确置于head最前且含width=device-width和initial-scale=1。
媒体查询本身不“适配”，它只是开关；真正起作用的是你写的样式逻辑是否匹配设备能力与用户行为。漏写 viewport、断点设错、混用 min/max-width，@media 就等于没写。
viewport meta 标签必须加，且不能写错
这是所有媒体查询生效的前提。浏览器判断的是视口宽度，不是设备物理宽度。没这个标签，移动端默认按 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和max-width在同一套逻辑里，容易覆盖冲突 - 边界值问题：
767.5px这类非整数宽度下，max-width: 767px可能漏判；min-width: 768px更可靠 - 横竖屏差异大时，加
and (orientation: landscape)分支，比如竖屏保脸用object-position: 50% 20%，横屏保肩部可能要10% 50%
object-fit 和 object-position 必须配对生效
想让图片在不同屏幕下不裁掉关键内容（比如人脸），光调 object-position 不行，它只在 object-fit: cover 或 none 下起作用。
- 确认父容器有明确宽高，否则
object-fit: cover没参照物，object-position无效 -
object-position语法同background-position：支持top left、50% 20%、10px 30px；第一个值是水平偏移（0% = 左），第二个是垂直偏移（0% = 上） - 别写
object-position: top就完事——它等价于top center，水平还是居中，可能切掉半张脸 - 调试时临时加
outline: 1px solid red看容器真实尺寸，或打开 DevTools “显示网格线”
媒体查询不能嵌套在选择器内部
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 面板验证：目标元素上是否真应用了媒体查询内的样式
最容易被忽略的其实是 viewport 的 initial-scale 和图片的 sizes 属性——前者一错，所有媒体查询都失焦；后者一漏，加载又慢又糊。别只盯着 width，横竖屏、DPR、深色模式这些维度，该用就得用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
