纯HTML+CSS响应式促销横幅可用<div>+background-image+媒体查询实现，关键在aspect-ratio或padding-top保宽高比、position: absolute控文字层级、min-height替代100vh、<picture>适配多端图片、按钮min-height: 44px+<a>标签+touch-action: manipulation确保可点可用。
怎么用纯 HTML + CSS 实现一个响应式促销横幅（Banner）
直接说结论：不需要 JavaScript，95% 的促销横幅用 <div> + background-image + 媒体查询就能稳稳跑起来。关键不是“炫技”，而是让文字可读、按钮可点、在手机上不溢出、在旧版 Safari 里不崩。
常见错误现象：banner 图片被拉伸变形、文字在 iPhone 上看不清、点击区域太小导致优惠券领不到。
- 用
aspect-ratio: 16 / 4或padding-top技法固定宽高比，避免图片被object-fit: cover强行裁切丢掉关键文案 - 文字层必须用
position: absolute+z-index显式控制层级，别依赖文档流——否则 iOS 微信内置浏览器可能把文字压在图下面 - 按钮至少设
min-height: 44px（iOS 触控最小建议值），font-size别小于16px，否则 Safari 会自动缩放破坏布局
如何让 banner 在微信内嵌浏览器里正常显示
微信 Android 和 iOS 内置 WebView 对 vh 单位支持不稳定，尤其弹出键盘后 100vh 会变短，导致 banner 被截断。这不是 bug，是它的 viewport 行为特性。
使用场景：用户扫码进活动页，第一屏就是 banner，必须完整展示“满 299 减 50”这类核心信息。
立即学习“前端免费学习笔记（深入）”；
- 放弃
height: 100vh，改用min-height: 500px+ 媒体查询降级（如@media (max-height: 600px) { min-height: 400px; }） - 背景图用
background-size: contain而非cover，确保“限时抢购”四个字不被裁掉——营销图常把关键文案放在边缘 - 加一行
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">，禁掉双击缩放，防止用户误操作放大 banner 导致按钮错位
为什么 <picture> 比单个 <img> 更适合促销 banner
因为促销图通常要适配三种场景：桌面大图（2000px 宽）、Pad 中图（1200px）、手机小图（750px），且 WebP 格式在安卓 Chrome 里能省 40% 流量，但 iOS 13 以下不支持。
参数差异：<source> 的 media 是断点依据，type 是格式兜底，顺序不能错——浏览器按顺序匹配，第一个满足的就加载。
<picture> <source media="(min-width: 1200px)" srcset="banner-desk.webp" type="image/webp"> <source media="(min-width: 768px)" srcset="banner-pad.jpg"> <img src="banner-mobile.jpg" alt="夏日大促：全场满299减50"> </picture>
- 务必给
<img>标签写alt，不仅是 SEO，更是当所有<source>都不匹配时的最终 fallback（比如某些国产浏览器禁用 WebP） - 不要用
srcset+sizes替代<picture>—— 那适合同一张图不同分辨率，而促销 banner 三端文案字号/排版常不同，必须分图 - WebP 文件记得开有损压缩（q=75～85），不然体积优势没了，反而增加解码耗时
点击区域做不好，再好看的 banner 也白搭
很多团队花三天调渐变阴影和 hover 动画，结果按钮 click 区域只有文字大小，用户点十次才成功一次。本质是没理解“可点击区域”和“视觉元素”的分离原则。
性能影响：用 pointer-events: none 在文字层上透传点击，比监听整个 banner 然后判断坐标靠谱得多，也避免误触触发多次埋点。
- 把按钮包在
<a href="/coupon?utm_source=banner">里，别用<div onclick>—— 后者对屏幕阅读器不友好，且部分安卓浏览器不触发click事件 - 按钮容器设
display: inline-flex+align-items: center，别靠line-height垂直居中，后者在字体加载完成前会跳动 - 加
touch-action: manipulation样式，减少 iOS 上约 300ms 点击延迟，用户感知更“跟手”
最易被忽略的一点：banner 如果是动态轮播的，每张图的链接必须对应独立 utm_campaign 参数，否则运营无法区分“首屏 banner”和“第二屏 banner”的转化效果——技术实现很简单，但漏掉就等于白做了。
