真实断点应从UI实际变化中确定，如导航折行、图片变形等临界宽度；优先用min-width向上增强，单位统一用px，只依赖width媒体特征。
断点不是设备型号，是布局撑不住的临界值
别再抄“iPhone 14 Pro Max 宽度是 430px”这种参数表——@media (max-width: 430px) 对你页面毫无意义，除非你的导航栏真在 430px 宽度下第一次换行、或按钮点击区缩到 32px 高导致误触。真实断点必须从你自己的 UI 里找：打开 Chrome DevTools → 切换设备模拟器 → 拖动宽度滑块，盯住这几个信号：
- 导航文字首次折行的宽度 → 记为
$breakpoint-nav-wrap - 卡片内图片被横向拉伸变形的宽度 → 常见于
414px或480px - 系统字体放大 150% 后，同一组件触发样式变更的宽度可能比默认小 25% → 必须手动测试
最终记录下来的数值，才是你项目里真正该用的断点。
优先用 min-width 向上增强，别混用 max-width
写 @media (max-width: 767px) 看似覆盖“所有手机”，但 iPad 分屏只剩 500px 宽时也会命中，结果侧边栏消失、操作按钮错位。更稳的做法是移动优先 + min-width：
- 基础样式不包媒体查询，直接适配最小视口（如
320px） - 所有增强逻辑统一用
@media (min-width: 480px)、@media (min-width: 768px)往上加 - 避免在同一逻辑链里混用
min-width和max-width，比如@media (min-width: 480px) and (max-width: 767px)—— 层叠冲突和维护成本会指数级上升
这样既保证小屏可用，又让大屏增强规则清晰可追溯。
立即学习“前端免费学习笔记（深入）”；
单位必须统一用 px，别碰 em 或 vh
@media (min-width: 48em) 表面语义正确，实际依赖 html { font-size }，而用户可能调过系统字号或浏览器缩放，导致断点漂移到 45px 或 52px。更糟的是 vh 媒体查询：
- iOS 9.3 以下不支持
vh媒体特征 - Safari 滚动时会重算视口高度，造成样式闪跳
- 设计稿给的是
768px容器？媒体查询就写@media (min-width: 768px)，别翻译
现代项目里，rem 管元素尺寸，px 管断点，分工明确，不越界。
别信 device-width 和 orientation，盯紧 width
@media (device-width: 375px) 匹配的是物理像素，不是 CSS 像素；横竖屏切换、分屏、折叠屏展开后，它完全失效。iOS Safari 在横屏播放视频时，orientation: portrait 仍会错误触发；Android 折叠屏展开后 orientation 还报 portrait，但视口已超 1000px。
真正该信的是 width（即 window.innerWidth 对应的 CSS 像素）：
- 用
@media (width 替代 <code>@media (max-width: 480px)，语义更准（注意：旧版 Safari 不支持，优先用min-width） - 需要更高可靠性？配合 JS 动态监听
resize或orientationchange事件做兜底
断点从来不是“覆盖某类设备”，而是守住你 UI 的可用性底线——这点最容易被忽略，也最常翻车。
