必须基于页面内容实际“撑不开”或“挤不下”的宽度确定断点，用浏览器开发者工具拖动窗口观察导航换行、卡片列数变化、文字行宽超60–70ch等真实断裂点，记下如420px、680px等像素值；优先使用min-width逐级增强，统一用px单位，且必须配合法viewport meta标签。
移动端断点不能靠查设备列表或抄别人数值，必须基于你页面里内容实际“撑不开”或“挤不下”的宽度来定。
怎么找真正该用的断点值？
别打开手机参数表，直接在浏览器开发者工具里拖动响应式调试窗口，观察布局断裂点：
- 导航栏文字开始换行或图标重叠的宽度
- 卡片网格从三列变成两列的临界点
- 主内容区段落文字行宽超过 60–70ch 导致可读性下降的位置
- 按钮文字被截断、图标和文字错位的瞬间
记下这几个真实像素值，比如 420px、680px、920px —— 它们才是你项目该用的断点，不是网上搜来的 768px 或 1024px。
@media 应该用 min-width 还是 max-width？
默认只用 @media (min-width: ...)。写 @media (max-width: 767px) 是给自己埋坑：
- 后续每加一个新断点，都要更高特异性或
!important才能覆盖旧规则 - iPad Pro 横屏宽度常超
1024px，但你的max-width: 1024px规则却失效了 - 层叠逻辑混乱，改一处样式可能意外影响其他尺寸
正确写法是移动优先逐级增强：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
@media (min-width: 480px) { /* 小屏优化 */ }<br>@media (min-width: 768px) { /* 平板竖屏 */ }<br>@media (min-width: 1024px) { /* 桌面基础 */ }
px 还是 em 写断点？
一律用 px。原因很实在：
-
em断点依赖html根元素的font-size，而微信 WebView、某些安卓浏览器会动态重设它 - 用户调大系统字体或缩放页面时，
40em可能对应450px或520px，断点就漂了 - 设计稿给的是像素值，用
px直接对应，不绕弯、不猜、不调试
rem 适合控制字体和间距，px 适合断点 —— 分工明确比“语义统一”更重要。
viewport 设置漏了会怎样？
没这句 <meta name="viewport" content="width=device-width, initial-scale=1.0">，所有断点都白设：
- iOS Safari 默认把页面渲染成 980px 宽，再缩放显示，
min-width: 480px永远不触发 - 安卓部分浏览器忽略 DPR，导致 CSS 像素和物理像素错位，断点位置偏移
- 即使写了
min-width: 320px，页面也可能在 iPhone SE 上横向滚动
这个 meta 标签必须放在 最前面，且不能被 JS 动态插入 —— 它得在 CSS 解析前就生效。
断点不是配置项，是内容行为的快照；你写的不是“适配 iPhone 15”，而是“让导航在 462px 宽度下不换行”。真机测试时，别只看分辨率，盯着内容是否自然、是否需要手动缩放、是否有隐藏溢出，那才是断点该管的事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
