结论：断点应基于布局实际折断点而非设备标准值，优先用min-width实现移动优先，避免混用max-width/min-width、orientation和device-width，确保viewport标签正确。
直接说结论：用 @media 配合 min-width 和 max-width 就能覆盖绝大多数设备，但断点不能照搬“标准值”，得看你的布局实际在哪折断。
为什么不能只记「手机768px、平板992px」这些数字
所谓“常见断点”只是参考，不是规范。真实项目里，768px 可能刚好卡在某个组件换行的临界点前，也可能完全没影响。关键不是设备型号，而是你写的布局在哪个宽度开始显得挤或空。
- 先写默认（大屏）样式，再用
@media (max-width: ...)逐步收缩 - 打开浏览器 DevTools，拖动响应式调试器，观察容器、文字、图片何时错位或溢出
- 把第一个明显“崩了”的宽度记下来，就是你的第一个断点，比如
542px或813px—— 没问题，就用它 - 避免堆叠太多断点：
(max-width: 400px)、(max-width: 480px)、(max-width: 576px)这类密集区间通常没必要，选 2–3 个真正起作用的就够了
移动端优先时，min-width 比 max-width 更可靠
如果你采用移动优先策略（推荐），默认样式针对小屏，然后用 @media (min-width: ...) 向上增强。这样比一堆 max-width 嵌套更易维护，也更符合现代 CSS 的层叠逻辑。
-
@media (min-width: 768px) { .grid { display: grid; } }—— 小屏用 flex，到 768px 才启 grid - 不要混用：
@media (max-width: 767px)和@media (min-width: 768px)看似无缝，但 767.5px 这种非整数宽度在缩放或 DPR > 1 设备上可能不触发任一规则 - 真要兼容边界，用
em单位替代px：比如(min-width: 48em)（假设基础字号 16px，即 768px），更健壮
orientation 和 device-width 别乱用
orientation: landscape 看起来直观，但实际触发不稳定——Safari 在 iOS 上会因地址栏显隐改变视口高度，导致横竖屏判断抖动；device-width 更是早已被现代浏览器弱化，它返回的是设备物理像素宽度，和 CSS 视口宽度无关，基本失效。
立即学习“前端免费学习笔记（深入）”；
- 优先用
width/height（指 CSS 视口尺寸），而不是device-width - 横竖屏适配尽量靠布局本身解决：flex wrap、grid auto-flow、
aspect-ratio，而非依赖@media (orientation: ...) - 如果必须区分方向，加个防抖：用 JavaScript 监听
window.matchMedia并节流，CSS 层只做兜底
性能提醒：别在 @media 里写重绘开销大的属性
媒体查询本身不耗性能，但里面写的样式会参与每次渲染计算。尤其在低端 Android 设备上，频繁触发 transform、filter 或大量 box-shadow 可能卡顿。
- 避免在
@media块里重复定义整套动画或过渡效果，提取成通用 class - 慎用
background-image切换：不同断点加载不同图，不如用<picture></picture>+srcset，交给浏览器决定 - 如果某断点只改字体大小和 padding，就只写这两项；别把整个组件样式全拷进去
最常被忽略的一点：媒体查询生效的前提是 HTML 有正确的 viewport meta 标签。漏掉 <meta name="viewport" content="width=device-width, initial-scale=1">，所有 @media 都会在桌面 Chrome 模拟器里“看起来正常”，上线后在真机上全乱套。
