我想知道是否可以添加自适应缩放？我想在右侧添加一个侧边栏组件。
CSS
/* 获取用户头像宽度并设置广告容器的最大宽度 */
/* 广告容器样式 */
#list-area {
display: flex; /* 使用 flexbox 排列广告 */
flex-direction: column; /* 垂直显示广告 */
gap: 0; /* 删除广告图片之间的间距 */
padding: 0; /* 删除容器内边距 */
margin: 0; /* 确保广告容器周围没有额外的边距 */
max-width: 812px; /* 将广告容器的最大宽度限制为 812px（头像宽度：48px） */
}
/* 广告链接样式 */
.banner-ad {
display: block; /* 使广告容器成为块级元素 */
width: 100%; /* 确保广告容器占据 100% 的宽度 */
max-width: 100%; /* 防止超出最大宽度 */
margin: 0; /* 删除广告容器之间的任何间距 */
}
/* 响应式广告图片样式 */
.ad-image {
width: 100%; /* 确保图片占据其父容器的全部宽度 */
height: auto; /* 保持图片的原始纵横比 */
max-width: 100%; /* 防止图片超出其容器的最大宽度 */
display: block; /* 修复图片下方空白的问题 */
margin: 0; /* 删除图片周围的任何额外空间 */
}
/* 响应式设计：调整大屏幕和小屏幕上的广告显示 */
/* 在屏幕宽度小于 768px 的设备上调整广告显示 */
@media (max-width: 768px) {
#list-area {
padding: 0; /* 确保在移动设备上没有额外的内边距 */
}
.banner-ad {
width: 100%; /* 确保广告在小屏幕上占据全部宽度 */
}
.ad-image {
width: 100%; /* 确保图片适应容器宽度 */
height: auto; /* 保持图片的纵横比 */
}
}
/* 在非常小的设备（例如，竖屏模式下的手机）上进一步调整广告图片 */
@media (max-width: 480px) {
.ad-image {
width: 100%; /* 确保图片适应手机屏幕宽度 */
max-width: 100%; /* 将最大宽度设置为 100%，以避免过大 */
height: auto; /* 保持图片的纵横比 */
}
}
