优先用宽度而非高度做断点，因视口高度受浏览器地址栏动态遮挡影响易误触发，而宽度稳定且与设计稿切图逻辑一致；推荐3–4个max-width/min-width组合断点覆盖主流设备，配合rem布局时应在各断点内直接设置html font-size以确保基准准确。
直接用 @media 检测 max-width 就够了，别碰 max-height —— 浏览器地址栏和底部操作栏会动态遮挡视口高度，导致媒体查询误触发。
为什么优先用宽度而不是高度做断点
移动端 H5 页面在真实设备上运行时，window.innerHeight 会随地址栏收起/展开而变化。比如 iPhone Safari 在滚动时隐藏地址栏，innerHeight 突然变大，原本匹配 @media (max-height: 667px) 的样式可能瞬间失效或错误启用。
而屏幕宽度（device-width 或视口 width）是稳定不变的，用户横屏时虽然 height 和 width 互换，但你本就应该用 orientation 单独处理——不是靠高度断点去“猜”。
- 所有主流机型的宽度分辨率都落在 320px–414px（iPhone）到 768px+（iPad）区间，用
max-width断点覆盖更可靠 - 设计稿通常按宽度切图（如 750px 或 375px），CSS 媒体查询天然对齐这一工作流
-
max-height在折叠屏、分屏模式下行为不可控，调试成本高
推荐的断点组合与写法
别堆 10 个断点。3–4 个足够覆盖 95% 的移动设备，且维护成本低：
@media screen and (max-width: 320px) { /* 老旧小屏机，如 iPhone 5 */ }@media screen and (min-width: 321px) and (max-width: 375px) { /* iPhone SE / 8 */ }@media screen and (min-width: 376px) and (max-width: 414px) { /* iPhone X / 11 / 13 Pro */ }@media screen and (min-width: 415px) { /* 平板、折叠屏展开态、桌面模拟器 */ }
- 用
min-width+max-width组合比单用max-width更精准，避免样式层叠污染 - 断点值建议取设备物理像素宽度 ÷ 设备像素比（dpr），比如 iPhone 13 Pro 是 1170px / 3 = 390px，但 CSS 视口单位是逻辑像素，所以用 414px 更稳妥
- 不要写
@media (max-width: 768px)来“通吃所有手机”，它会把 iPad mini 也卷进来，导致按钮过小、文字挤在一起
配合 rem 布局时 media 查询怎么写
媒体查询在这里的作用不是“改布局”，而是“调根字体大小”，让 rem 计算基准更贴合实际设备。常见错误是把媒体查询写成独立样式块，结果 html { font-size } 被后面规则覆盖。
正确写法是：在每个断点内直接设置 html 的 font-size，且确保顺序从窄到宽，利用 CSS 层叠优先级自然覆盖：
html { font-size: 50px; } /* 默认兜底，防 PC 直接打开 */
@media screen and (max-width: 320px) {
html { font-size: 320px / 15; } /* 假设设计稿等分为 15 份 */
}
@media screen and (min-width: 321px) and (max-width: 375px) {
html { font-size: 375px / 15; }
}
@media screen and (min-width: 376px) and (max-width: 414px) {
html { font-size: 414px / 15; }
}
- 除法必须用真实数值，不能写
375 / 15这种表达式（CSS 不支持运行时计算）；用预处理器（如 Sass）或构建时替换 - 别在媒体查询里写
body { font-size: 14px; }，这会破坏 rem 链路；所有尺寸统一用rem - 如果用了
viewport的initial-scale=1，确保没加maximum-scale或user-scalable=no，否则 iOS 双击缩放失效，影响可访问性
横屏状态要单独处理吗
要，但只在必要时。多数 H5 页面不强制限制方向，横屏只是临时状态，不该重写整套布局。真正需要干预的场景极少：
- 视频播放页：横屏时隐藏 header，全屏 video 标签撑满
- 表格类数据页：竖屏列数为 2，横屏改为 4 列以提升可读性
- 游戏或工具类 H5：依赖陀螺仪或横屏手势，需锁定方向并加载对应资源
写法示例：@media screen and (max-width: 767px) and (orientation: landscape) { .video-wrapper { height: 100vh; } }。注意这里用了 max-width: 767px 限定只作用于手机，避免 iPad 横屏也被误匹配。
真正容易被忽略的是：横屏时视口宽度变大，但很多开发者忘了检查 max-width 断点是否还生效——比如你写了 @media (max-width: 414px)，横屏后 iPhone 13 Pro 宽度变成 844px，这条规则就完全失效了。要么加 orientation 组合判断，要么用 min-height 辅助（仅限明确知道横屏后高度稳定的场景）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
