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