超宽屏banner应弃用100vh，改用min-height+媒体查询降级；优先aspect-ratio控制比例并兜底safari；背景图用contain保文案完整；文字按钮须独立响应式缩放。
超宽屏下 Banner 被拉长，本质是 height: 100vh 或固定比例容器在大视口里失控，不是图片问题，而是高度约束逻辑错了。
别用 100vh 做 Banner 高度基准
100vh 在 4K/5K 屏上会拉出 2000px+ 高度，文字被稀释、按钮变小、关键文案缩成一条线。更麻烦的是：微信 iOS WebView 在弹出键盘后会重算 vh，导致 Banner 突然截断——这不是 bug，是它的 viewport 行为。
- 改用
min-height+ 媒体查询降级：min-height: 500px是安全起点，再加@media (max-height: 600px) { min-height: 400px; } - 完全放弃
height: 100vh，哪怕加了max-height也挡不住 3840×2160 下的视觉失真 - 如果必须“全屏高”，用 JS 检测
window.devicePixelRatio > 2+screen.width > 3000后动态切 banner 高度类，CSS 不适合做这种设备级判断
用 aspect-ratio 控制比例，但得兜底旧 Safari
aspect-ratio: 16 / 4 是目前最干净的方案：它让容器自动维持宽高比，不依赖 JS、不靠 padding-top 技巧，图片用 object-fit: cover 就能稳住构图。但它在 Safari 15.4 之前直接失效，表现为高度塌陷或拉伸变形。
- 必须写两套：
.banner { aspect-ratio: 16 / 4; }+@supports not (aspect-ratio: 16 / 4) { .banner { padding-top: 25%; position: relative; } .banner > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } } - 别用
padding-top单独撑高——它依赖子元素绝对定位，一旦漏写position: absolute，整个 banner 就塌了 - 测试时打开 Safari 14（macOS Catalina）真机或模拟器，光看 Chrome 正常没用
背景图用 contain，不是 cover
促销 Banner 的文案常压在图边缘，“限时抢购”四个字被 background-size: cover 裁掉是高频事故。cover 保填充不保完整，contain 才保全部内容可见。
- 改用
background-size: contain，并配background-repeat: no-repeat和background-position: center - 如果图太宽导致中间留白，宁可用
background-size: 100% auto+min-height组合，也别退回到 cover - 注意：contain 在小屏上可能让图片缩得太小，此时需配合媒体查询切换：
@media (max-width: 768px) { background-size: 100% auto; }
超宽屏下文字和按钮必须独立响应
只缩容器不管文字，等于白调。Banner 高度压到 500px 后，16px 字体在 3840px 宽屏上依然像针尖，用户根本看不清“满 299 减 50”。
- 按钮强制
min-height: 44px（iOS 触控最小值），字体用font-size: clamp(1rem, 2.5vw, 1.25rem)，2.5vw 是起点，实测调整到 1.8–2.2vw 更适合中文行宽 - 文字层用
position: absolute+z-index显式提层，别信文档流——iOS 微信内置浏览器会把文字压在图下面 - 检查
<meta name="viewport">是否含user-scalable=no，否则双击缩放会破坏所有尺寸控制
真正难的不是写对某一行 CSS，而是意识到：超宽屏 Banner 不是“放大版手机 Banner”，它需要一套独立的尺寸契约——从容器高宽比、图片裁剪策略，到文字缩放节奏，全都得重新校准。漏掉任意一环，用户看到的就是一张被拉薄的、看不清字的广告图。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
