响应式广告位应通过css媒体查询控制display状态而非js动态插入，确保dom中广告容器始终存在；移动端保留1个banner，桌面端可展示sidebar或header；需用固定尺寸或aspect-ratio占位防跳动，禁用width:100%防拉伸；ssr时须输出完整空容器结构以避免cls问题。
广告位在响应式网页中不能靠 JS 动态插入或删减 DOM，否则会触发 CLS（累积布局偏移）、SSR 不友好、被广告拦截器屏蔽——正确做法是让容器始终存在，只用 display: none 控制可见性，并用固定尺寸或 aspect-ratio 占位防跳动。
为什么不能用 JavaScript 动态插入广告代码
常见错误是监听 window.innerWidth 后用 appendChild() 插入 <ins></ins> 或 <div class="ad">。这会导致：
<ul>
<li>首屏广告延迟加载，影响 LCP（最大内容绘制）指标</li>
<li>服务端渲染（SSR）时无广告结构，客户端水合后突然插入，触发 CLS</li>
<li>部分广告脚本（如 Google AdSense）要求容器在 DOM 加载完成前就存在，否则不执行</li>
<li>广告拦截器可能将动态插入的 <code><ins></ins> 标签识别为干扰行为而屏蔽
用 CSS 媒体查询控制 display 状态
广告容器必须在 HTML 中静态存在，CSS 仅切换其渲染状态。断点建议与项目全局一致，例如：
@media (max-width: 767px) {
.ad-header, .ad-sidebar { display: none; }
.ad-banner { display: block; }
}
@media (min-width: 768px) and (max-width: 1023px) {
.ad-header { display: block; }
.ad-banner, .ad-sidebar { display: none; }
}
@media (min-width: 1024px) {
.ad-header, .ad-sidebar { display: block; }
.ad-banner { display: none; }
}
注意：visibility: hidden 不可用——它仍占布局空间，且广告脚本可能已执行但不可见，浪费资源和请求。
如何防止广告位导致页面跳动（CLS）
单纯 display: none 会让下方内容上移，造成视觉跳动。解决方法是让外层容器保持占位：
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 对 banner 类型：设固定高宽，如
.ad-banner { width: 100%; height: 50px; }，或用aspect-ratio: 320 / 50（兼容现代浏览器） - 对 sidebar 类型：用
padding-top百分比占位，例如.ad-sidebar { padding-top: 200%; }+position: relative，内部广告元素绝对定位 - 更稳妥方案：用
grid-template-areas在不同断点分配区域，例如桌面端grid-template-areas: "header header" "sidebar main"，移动端改为"header" "main" "banner"
SSR 和首屏广告结构必须完整输出
服务端渲染时，所有广告容器（哪怕当前断点下应隐藏）都必须出现在 HTML 中，例如：
<div class="ad ad-banner"></div> <div class="ad ad-header"></div> <div class="ad ad-sidebar"></div>
这是避免 CLS 的硬性要求。如果 CMS 模板或框架（如 Next.js、Nuxt）默认过滤空 div，需显式保留或加注释占位。另外，<ins></ins> 标签本身不应直接写在 HTML 中——它由广告 SDK 动态注入，容器才是你可控的部分。
真正容易被忽略的是：广告容器的 width 和 height 必须明确，禁用 width: 100% 单独使用（尤其在 flex 容器内），否则可能被拉伸变形；移动端 banner 推荐用 320x50 或 300x250，桌面端 header 用 728x90、sidebar 用 300x600，这些尺寸是广告平台实际投放的基准值，不是随意定的。
