应基于内容坍塌点设 min-width 断点，320px/375px/414px/480px 四档覆盖真实场景；用 Chrome DevTools 拖动宽度滑块观察布局变化确定值；避免 max-height，优先用 width；配合 rem 时媒体查询只调 html font-size；勿迷信 768px 平板断点，需结合 hover、pointer 等特性交叉判断。
直接用 min-width 按内容“撑不住”的临界点设断点，不查手机型号、不套固定数值，3–4 个足够覆盖真实场景。
优先用 min-width，按内容坍塌点定值
别盯着 iPhone 13 是 390px 还是 414px——这些数字对 CSS 布局没意义。真正该关注的是：你的导航栏文字什么时候开始换行？卡片从单列变成双列时，宽度刚好卡在多少？打开 Chrome DevTools → 切换设备工具栏 → 拖动宽度滑块，边拖边看布局何时“卡住”，那个像素值就是你的断点。
- 320px：仅用于极简修正（如按钮点击区太小），不写完整布局
- 375px：iPhone 8/SE 竖屏常见临界，适合调字体、行高和间距
- 414px：iPhone X 及之后全面屏主力区间，适配圆角与安全区域
- 480px 及以上：侧边栏可稳定显示、导航可横排展开的起点
别碰 max-height，宽度才稳定可靠
手机浏览器地址栏会随滚动收起/展开，window.innerHeight 动态变化，@media (max-height: 667px) 这类规则极易误触发。而视口宽度（width）在竖屏下基本恒定，横屏时你本就该用 orientation 单独处理，不是靠高度去“猜”设备状态。
- 所有主流机型逻辑宽度集中在 320px–414px（手机）到 768px+（平板）
- 折叠屏展开后宽度可能超 1200px，但仍是同一台设备，样式应自然增强，而非断裂
- 用
min-width递增写法，避免min-width和max-width混用导致样式覆盖冲突
配合 rem 时，媒体查询只干一件事：调 html font-size
rem 布局的基准是 html { font-size }，媒体查询在这里不是改布局结构，而是让这个基准更贴合当前屏幕。每个断点内直接设置 html 的 font-size，顺序从窄到宽，靠 CSS 层叠自然覆盖：
@media (min-width: 320px) { html { font-size: 16px; } }@media (min-width: 375px) { html { font-size: 18px; } }@media (min-width: 414px) { html { font-size: 20px; } }- 确保这些规则放在 CSS 文件靠后位置，不被其他全局样式覆盖
警惕“768px 是平板”的陷阱
这个数来自初代 iPad，现在已严重失准：iPhone 14 Pro 竖屏 430px，iPad mini 竖屏 744px，安卓分屏下甚至可能只剩 540px。纯靠宽度判断，会把大屏手机当平板、把小屏平板当手机。真要区分设备能力，应交叉验证：
-
@media (min-width: 768px) and (hover: hover)：排除纯触屏手机，匹配支持悬停的平板/桌面 -
@media (min-width: 768px) and (pointer: fine)：针对鼠标或手写笔操作场景 - 日常 H5 项目中，专注内容断点比纠结设备类型更高效、更可控
