移动端 banner 被挤压主因是固定高度未适配视口，应采用 vh 单位（如 height: 25vh）配合 min-height 和媒体查询精细控制，并确保内层文字、图片等也响应式松绑，避免拉伸变形。
顶部 banner 在移动端被挤压，通常是因为固定高度值（如 height: 100px）在小屏幕下显得过大，或未适配视口变化导致内容溢出、字体缩放、图片拉伸等问题。用 vh 单位配合媒体查询是简洁有效的解法——既保持视觉占比，又兼顾不同设备的可用空间。
用 vh 替代固定像素高度
vh（viewport height）单位让 banner 高度随屏幕高度动态变化，比写死 px 更灵活。例如：
推荐写法：.banner { height: 25vh; }
这样在 iPhone SE（320×568）上约 142px，在 iPad Pro（1024×1366）上约 341px，视觉比例基本一致。
注意点：
- 避免用
100vh—— 移动端浏览器地址栏收放会触发视口高度跳变，造成 banner 瞬间拉伸或收缩 - 建议范围控制在
20vh ~ 35vh，兼顾内容可读性与留白 - 搭配
min-height防止过小屏下 banner 压缩过度：min-height: 120px;
用媒体查询做精细断点控制
vh 是好起点，但纯靠它还不够——比如折叠屏展开后视口变宽，但 banner 高度仍按高计算，可能显得单薄。此时用媒体查询补充约束：
立即学习“前端免费学习笔记（深入）”；
示例（适配主流移动设备）：
@media screen and (max-width: 768px) {
.banner { height: 28vh; min-height: 100px; }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
.banner { height: 22vh; min-height: 140px; }
}
@media screen and (min-width: 1025px) {
.banner { height: 18vh; min-height: 160px; }
}
这样既保留响应式弹性，又防止横屏 iPad 或桌面端 banner 过于扁平。
内层内容也要“松绑”
banner 高度调好了，但如果内部文字用 px 字号、图片用 width: 100% 且没设 height: auto，照样会被挤压变形。
关键处理：
- 标题字号改用
rem或clamp()：font-size: clamp(1.2rem, 4vw, 1.8rem); - 图片用
object-fit: cover;+width: 100%; height: 100%;，避免拉伸失真 - 禁用用户缩放（可选）：
meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"，减少手动缩放干扰
测试时重点看这三处
改完别急着上线，真机测试时盯紧：
- 微信内置浏览器（iOS/Android）是否出现 banner 闪烁或高度重算延迟
- 横竖屏切换瞬间，banner 是否有明显跳动（若有，检查是否用了
100vh或 JS 动态设高） - 低版本 Android（如 6.0）是否兼容
vh和clamp()，必要时加降级：height: 120px; height: 25vh;
基本上就这些。核心是：用 vh 定主节奏，用媒体查询调细节，再把内容层也按比例放开——不复杂但容易忽略。
