响应式布局失效主因是断点逻辑混乱，应统一用min-width递进、避免min/max混用；优先采用rem断点适配用户缩放；必须配对viewport标签，并支持prefers-reduced-motion等可访问性特性。
media 查询中 min-width 和 max-width 别混用错场景
响应式布局失效，十次有八次是因为断点逻辑反了。比如用 max-width: 768px 写移动端样式，却在后续规则里又用 min-width: 769px 覆盖——中间 1px 空隙或设备像素比差异就可能让样式不触发。
更稳妥的做法是只用 min-width 从移动到桌面递进，或只用 max-width 从桌面到移动递进，避免交叉和间隙：
@media (min-width: 320px) { /* 手机基础 */ }
@media (min-width: 768px) { /* 平板 */ }
@media (min-width: 1024px) { /* 桌面 */ }
- 优先选
min-width：符合“移动优先”开发习惯，CSS 层叠更可控 - 避免写
(min-width: 320px) and (max-width: 767px)：增加维护成本，且对高 DPR 设备（如 iPhone 14 Pro）的物理宽度判断容易失准 - 真实设备宽度 ≠ CSS 像素宽度，
768px断点对应的是视口宽度（viewport设置为width=device-width时）
用 em 或 rem 替代 px 写断点更健壮
用户缩放网页、系统字体放大、阅读模式开启时，px 断点会卡死在固定像素值上，而 em 是基于当前字体大小的相对单位，能随用户偏好动态响应。
例如，把 768px 换算成 48em（假设根字号为 16px）：
@media (min-width: 48em) {
.header { grid-template-columns: 1fr 3fr; }
}
-
1em = 当前元素 font-size，1rem = html 根元素 font-size - 换算公式：
rem 值 = px 值 ÷ 根字号（默认 16），所以768px → 48rem（不是48em）更准确 - 若项目已设
html { font-size: 10px; }，则768px → 76.8rem，务必按实际根字号重算
别忽略 prefers-reduced-motion 和 prefers-color-scheme
这些不是“锦上添花”，而是可访问性硬性要求。Safari、Chrome、Firefox 都已支持，但很多人只当玩具用。
比如动画卡顿用户启用“减少运动”后，transform 和 opacity 过渡仍会执行，必须显式关掉：
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
-
prefers-color-scheme: dark可用于自动切换主题色，但注意不要仅靠颜色区分信息（比如只改文字色而不改图标或边框） - 这两个媒体特性可与
min-width组合使用：@media (prefers-color-scheme: dark) and (min-width: 768px) - 测试方式：Chrome DevTools → Rendering → Emulate CSS media feature → 选对应项
viewport meta 标签没配对，媒体查询基本白写
再精细的 @media 规则，遇上缺失或错误的 ，在 iOS Safari 和安卓 WebView 中直接失效。
必须确保 HTML head 中有且仅有这一行标准写法：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 缺
width=device-width：iOS 会以 980px 渲染，max-width: 768px永远不匹配 - 加了
user-scalable=no：违反 WCAG 2.1，且部分浏览器（如 Firefox for Android）会忽略整个 viewport 声明 - 不要写
maximum-scale=1.0：它会锁死双击缩放，对低视力用户极不友好
断点设计再细，如果视口没对齐设备逻辑宽度，所有自适应都是空中楼阁。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
