必须写对且前置viewport meta标签，否则@media失效；优先用min-width移动优先，断点按内容临界点设；@media须顶层声明，禁嵌套；需兼顾orientation、resolution、prefers-color-scheme等真实场景。
漏写 <meta name="viewport">，@media 就是废代码 —— 这是最常被跳过的致命一步。
viewport meta 标签必须写对，且必须在所有 CSS 之前
媒体查询判断的是视口（viewport）宽度，不是设备物理宽度。没这行，iOS Safari 和安卓 Chrome 默认按 980px 渲染，@media (max-width: 480px) 永远不触发。
- 正确写法：
<meta name="viewport" content="width=device-width, initial-scale=1"> - 禁止写成
content="width=375"或硬设user-scalable=no（除非产品强要求） - 必须放在
最前面，早于任何<link rel="stylesheet">或<style></style>
用 min-width 做移动优先，别混用 max-width
写 @media (min-width: 768px) 比 @media (max-width: 767px) 更稳：边界值（比如 767.5px）、高 DPR 设备、多规则叠加时的覆盖顺序，全都不容易翻车。
- 基础样式写小屏（如
320px起），再用min-width向上增强 - 断点按内容撑不开的真实临界点设：文字换行异常、按钮挤成一条线、图片溢出容器 —— 而不是照抄 iPhone 15 Pro Max 的 430px
- 同一套逻辑里混用
min-width和max-width，极易出现意外交互，比如横竖屏切换后样式错乱
@media 必须顶层声明，不能嵌套在选择器内部
CSS 原生语法不允许在类名块里写 @media，像这样是无效的：
.header {
background: #fff;
@media (min-width: 768px) { /* ❌ 错误 */
padding: 1rem;
}
}
正确写法是提一层，让 @media 包裹整个规则块：
.header {
background: #fff;
}
<p>@media (min-width: 768px) {
.header {
padding: 1rem;
}
}</p>
- PostCSS/Sass 的嵌套写法只是编译时糖，最终输出必须是合法 CSS —— 检查构建产物确认
@media是顶层声明 - 用 DevTools 的 Styles 面板验证：目标元素上是否真应用了媒体查询内的样式，而不是只看代码写了没
别只盯着 width，orientation、resolution、prefers-color-scheme 同样关键
真实项目里，单靠宽度断点远远不够：
-
@media (orientation: landscape)：视频页、表格页横屏时展开操作栏 -
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)：给 Retina 屏换@2x图或矢量图标 -
@media (prefers-color-scheme: dark)：配合系统深色模式自动切主题，比 JS 监听更轻量
这些特性不是“锦上添花”，而是用户真实会遇到的场景 —— 横竖屏频繁切换的平板用户、开着深色模式的夜间浏览者、用 iPad Pro 看高清图的设计师，都指望你把这层逻辑写对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
