手机端断点应基于内容溢出临界点而非iPhone型号，优先用min-width递增式设置768px、1024px、1200px三个主断点，并配合正确的viewport标签（width=device-width, initial-scale=1.0）确保生效。
手机端断点不是按 iPhone 型号设的
很多人一上来就查“iPhone 15 Pro Max 宽度是 430px，那断点该设 430？”——这思路错了。max-width: 430px 这类值对响应式毫无意义。真实断点来自内容：当文字开始挤成一团、按钮重叠、图片被裁掉一半、卡片换行错位时，那个浏览器宽度才是你的断点。现代设备 DPR 高、折叠屏展开后视口超宽、Chromebook 触屏模式也走移动端逻辑，硬套物理像素只会漏掉大量真实场景。
推荐用 min-width + 2–3 个主断点
写法必须是 @media (min-width: 768px)，不是 @media (max-width: 767px)。前者符合移动优先，CSS 加载更可控，维护成本低。主流断点只留三个就够了：
-
@media (min-width: 768px)：平板竖屏临界（iPad mini、小折叠屏合起态） -
@media (min-width: 1024px)：桌面窄屏起始（多数笔记本、大平板横屏） -
@media (min-width: 1200px)：宽屏优化（1440p+ 屏幕，侧边栏/多列有空间）
别加 480px 或 320px——这些在 2026 年已无实际覆盖价值；也别为“兼容所有安卓”堆 360px、390px，它们既不提升体验，还拖慢 CSS 解析。
viewport meta 标签写错，断点全失效
再准的断点，没这个标签也白搭：<meta name="viewport" content="width=device-width, initial-scale=1.0">。它必须放在 <head> 最顶部，早于任何 CSS 和 JS。漏掉 initial-scale=1.0，iOS Safari 会自动缩放；写成 width=375，视口就被锁死，min-width 查询永远不触发；放错位置（比如在 CSS 后面），真机上会出现闪屏或整页错位。
立即学习“前端免费学习笔记（深入）”；
断点内布局别只靠 media query 硬切
纯靠 @media 切样式容易陷入“每改一处就要补三处”的泥潭。更稳的做法是：
- 默认用
flex或grid写流动结构，比如grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) - 用
rem、%、vw控制尺寸，避免固定px值卡死布局 - 点击区域保证 ≥
44px × 44px，老安卓 WebView 对gap和flex: 1缩写支持差，要单独降级处理
断点真正该干的，是调整容器方向（flex-direction: column → row）、隐藏非核心模块、或放大字体层级，而不是从头重写整套布局规则。
