@media (max-height: ...) 可响应视口高度变化，适用于全屏表单、固定头尾重排等场景，但不能替代宽度断点主导主布局；需结合 orientation 使用，并注意其基于 window.innerHeight 且不响应键盘弹出等瞬态变化。
直接用 @media (max-height: ...) 就能响应视口高度变化，但要注意它和宽度查询的使用逻辑不同——高度断点更适合处理特定场景，比如全屏表单、弹窗、固定头部/底部区域的重排，而不是替代宽度断点做主布局。
优先用高度媒体查询的典型场景
- 页面有固定高度容器（如轮播图、视频播放器）需要在小屏幕下自适应缩放
- 表单或登录框在竖屏手机上需垂直紧凑排列，横屏平板则可横向分栏
- 顶部导航+底部工具栏挤压中间内容区时，根据可用高度动态调整内容流方向
- 全屏应用（如H5游戏、数据看板）需区分“窄高”（手机竖屏）和“宽矮”（折叠屏横屏）
写法示例：基于高度的垂直布局切换
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
/* 默认：竖屏常见布局，垂直堆叠 */
.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，自动换行 */
}
}
关键细节提醒
-
height指的是window.innerHeight，即浏览器可视区域高度，不含地址栏、系统状态栏等（移动端 Safari 可能因滚动临时变化，但媒体查询不会高频重触发） - 避免单独依赖高度断点做主响应式结构——多数设备宽度差异远大于高度差异，宽度仍是主导维度
- 和
orientation混合使用更稳妥：@media (orientation: portrait) and (max-height: 700px) { … } @media (orientation: landscape) and (max-height: 400px) { … } - 不要写
@media (device-height: ...)—— 它匹配物理屏幕高度，不随用户缩放或浏览器窗口调整而变，实际几乎不用
配合 JavaScript 做精细控制（可选）
如果需要实时响应高度变化（比如键盘弹出导致视口骤缩），媒体查询本身不触发重绘，此时可用：
-
matchMedia('(max-height: 600px)').matches判断当前状态 - 监听
resize事件 + 节流，再手动切换 class 控制布局
不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
