响应式广告位应通过CSS媒体查询控制display状态而非JS动态插入，确保DOM中广告容器始终存在；移动端保留1个banner，桌面端可展示sidebar或header；需用固定尺寸或aspect-ratio占位防跳动，禁用width:100%防拉伸；SSR时须输出完整空容器结构以避免CLS问题。
广告位在不同屏幕宽度下如何用媒体查询控制显示
响应式广告位不是靠 JS 动态插入，而是用 CSS 媒体查询提前定义好各断点的 display 状态。关键在于：广告容器本身始终存在 DOM 中，只通过 display: none 或 display: block 控制是否渲染，避免重排开销。
常见错误是把广告代码（如 标签）用 JS 按屏幕宽高动态 append，这会导致广告加载延迟、SSR 不友好、甚至被广告拦截器误判为干扰内容。
- 移动端通常只保留 1 个 banner（
320x50或300x250），桌面端可展示 sidebar（300x600）或 header（728x90） - 断点建议与项目全局一致，例如：
@media (max-width: 767px)（手机）、@media (min-width: 768px) and (max-width: 1023px)（平板）、@media (min-width: 1024px)（桌面） - 不要用
visibility: hidden替代display: none——它仍占布局空间，且广告脚本可能已执行但不可见，浪费资源
如何用 display + flex/grid 实现广告区域自适应占位
单纯隐藏广告位会导致页面“跳动”（内容上移），尤其在首屏 banner 下方。解决办法是让广告容器保持占位，仅隐藏内容部分。
推荐结构：外层容器设固定宽高（或按比例 padding-top 占位），内部广告元素用 display: none 控制可见性；或用 grid-template-areas 在不同断点切换布局区域分配。
立即学习“前端免费学习笔记（深入）”；
.ad-banner {
height: 50px;
}
@media (max-width: 767px) {
.ad-banner { display: block; }
}
@media (min-width: 768px) {
.ad-banner { display: none; }
}
.ad-sidebar {
width: 300px;
height: 600px;
}
@media (max-width: 1023px) {
.ad-sidebar { display: none; }
}
广告尺寸不匹配时如何避免拉伸变形
直接给 正确做法是用容器包裹，并用 服务端渲染时，不能依赖 典型问题：Next.js / Nuxt 项目里用 或 width: 100% 很危险——多数广告 JS 会强制写入内联 width/height，导致样式冲突或溢出。
max-width + overflow: hidden 截断，同时确保广告脚本加载前容器已有明确尺寸约束。
aspect-ratio: 320/50（现代浏览器）或 padding-top: 15.625%（兼容方案）维持比例img 的 width: 100%，改用 object-fit: contain 防止像素拉伸data-ad-format="auto" 或 data-full-width-responsive="true"
SSR/SEO 场景下广告位的条件渲染陷阱
window.innerWidth 判断设备类型——Node.js 环境无该对象。必须由客户端 JS 或服务端 UA 解析决定初始广告位，且需保证首屏 HTML 中广告容器结构完整（即使内容为空）。useEffect 或 onMounted 才显示广告，导致 SSR 输出无广告容器，CLS（累积布局偏移）飙升，Google Adsense 审核失败。
广告位响应式的真正难点不在 CSS 写法，而在于和广告 SDK 加载时机、SSR 渲染流程、以及浏览器解析顺序的配合。一个没注意的 class 和 data-ad-slot），由客户端广告 SDK 自行填充display: none —— 移动 UA 可能被桌面浏览器伪造，且无法响应横竖屏切换
display: none 放错层级，就可能导致广告请求发了但不可见，或者布局反复重排。
