使用百分比和vw单位设置宽度，结合max-width限制最大尺寸；2. 通过媒体查询适配不同设备，调整图片、字体等；3. 背景图配合文字层提升设计灵活性；4. 利用srcset优化图像清晰度。
制作响应式广告横幅的关键是让横幅在不同设备上都能自适应屏幕宽度，同时保持清晰和美观。下面介绍几种实用的 CSS 方法来实现这一目标。
1. 使用相对单位和百分比宽度
避免使用固定像素值，改用百分比或 vw（视窗宽度单位）来设置横幅尺寸。
示例：设置横幅宽度为父容器的 100%，最大宽度限制为设计稿原始宽度（如 970px），高度自适应。
HTML:
<div class="ad-banner"><br> <img src="ad.jpg" alt="广告图片"><br></div>
立即学习“前端免费学习笔记（深入）”；
CSS:
.ad-banner {<br> width: 100%;<br> max-width: 970px;<br> margin: 0 auto;<br>}
.ad-banner img {<br> width: 100%;<br> height: auto;<br> display: block;<br>}
2. 使用媒体查询适配不同屏幕
针对手机、平板、桌面等设备调整横幅大小或隐藏某些内容。
@media (max-width: 768px) {<br> .ad-banner {<br> max-width: 100%;<br> }<br> .ad-text {<br> font-size: 14px;<br> }<br>}
@media (max-width: 480px) {<br> .ad-banner img {<br> background-image: url('ad-mobile.jpg');<br> background-size: cover;<br> }<br>}
3. 背景图横幅 + 文字覆盖（适合复杂设计）
使用背景图可以更好地控制响应式裁剪，并配合文字层增强可读性。
HTML:
<div class="ad-banner-bg"><br> <div class="ad-content"><br> <h2>促销活动</h2><br> <p>限时优惠，立即参与</p><br> </div><br></div>
CSS:
.ad-banner-bg {<br> width: 100%;<br> height: 250px;<br> background-image: url('ad-desktop.jpg');<br> background-size: cover;<br> background-position: center;<br> display: flex;<br> align-items: center;<br> justify-content: center;<br> color: white;<br> text-align: center;<br>}
@media (max-width: 600px) {<br> .ad-banner-bg {<br> height: 180px;<br> background-image: url('ad-mobile.jpg');<br> }<br> .ad-content h2 {<br> font-size: 18px;<br> }<br>}
4. 图片分辨率优化
确保图片在高清屏上不模糊，可使用 srcset 提供多倍图。
<img src="ad-regular.jpg"<br> srcset="ad-retina.jpg 2x"<br> alt="广告"<br> style="width:100%; height:auto;">
基本上就这些。核心是灵活布局、适配断点、图像优化，就能做出在各种设备上都表现良好的响应式广告横幅。
