HTML媒体查询如何根据视口高度变化调整局部垂直布局

@media (max-height: ...) 可响应视口高度变化，适用于全屏表单、固定头尾重排等场景，但不能替代宽度断点主导主布局；需结合 orientation 使用，并注意其基于 window.innerHeight 且不响应键盘弹出等瞬态变化。

直接用 @media (max-height: ...) 就能响应视口高度变化，但要注意它和宽度查询的使用逻辑不同——高度断点更适合处理特定场景，比如全屏表单、弹窗、固定头部/底部区域的重排，而不是替代宽度断点做主布局。

优先用高度媒体查询的典型场景

1. 页面有固定高度容器（如轮播图、视频播放器）需要在小屏幕下自适应缩放
2. 表单或登录框在竖屏手机上需垂直紧凑排列，横屏平板则可横向分栏
3. 顶部导航+底部工具栏挤压中间内容区时，根据可用高度动态调整内容流方向
4. 全屏应用（如H5游戏、数据看板）需区分“窄高”（手机竖屏）和“宽矮”（折叠屏横屏）

写法示例：基于高度的垂直布局切换

/* 默认：竖屏常见布局，垂直堆叠 */.content-section {display: flex;flex-direction: column;gap: 16px;}/* 当视口高度 ≤ 600px（如小屏手机横屏、部分折叠屏）时，改为紧凑垂直流 */@media (max-height: 600px) {.content-section {gap: 8px; /* 缩小间距节省空间 */font-size: 0.9em;}.form-group {margin-bottom: 4px; /* 表单项更紧凑 */}}/* 当视口高度 ≥ 800px（如平板竖屏、桌面小窗口），启用多行垂直分组 */@media (min-height: 800px) {.content-section {flex-direction: row;flex-wrap: wrap;}.section-item {flex: 1 1 300px; /* 每项最小宽300px，自动换行 */}}

关键细节提醒

1. height 指的是 window.innerHeight，即浏览器可视区域高度，不含地址栏、系统状态栏等（移动端 Safari 可能因滚动临时变化，但媒体查询不会高频重触发）
2. 避免单独依赖高度断点做主响应式结构——多数设备宽度差异远大于高度差异，宽度仍是主导维度
3. 和 orientation 混合使用更稳妥：

   @media (orientation: portrait) and (max-height: 700px) { … }@media (orientation: landscape) and (max-height: 400px) { … }

4. 不要写 @media (device-height: ...) —— 它匹配物理屏幕高度，不随用户缩放或浏览器窗口调整而变，实际几乎不用

配合 JavaScript 做精细控制（可选）

如果需要实时响应高度变化（比如键盘弹出导致视口骤缩），媒体查询本身不触发重绘，此时可用：

1. matchMedia('(max-height: 600px)').matches 判断当前状态
2. 监听 resize 事件 + 节流，再手动切换 class 控制布局

不复杂但容易忽略