如何根据div尺寸或屏幕大小展示对应规格的广告

方案1：使用CSS容器查询（推荐，2024年主流浏览器全支持） #

无需写JS逻辑，直接根据广告父容器的实时宽度自动切换展示的广告，性能最优。
首先给广告包裹容器加容器类型声明，再写匹配规则：

/* 广告包裹容器基础样式 */
.ad-container {
  container-type: inline-size;
  width: 100%;
}
/* 默认隐藏所有广告 */
.ad-container [id^="ad-"] {
  display: none;
}
/* 容器宽度≥1220px时展示ad-1 */
@container (min-width: 1220px) {
  #ad-1 { display: block; }
}
/* 容器宽度在650px~1219px区间时展示ad-2 */
@container (min-width: 650px) and (max-width: 1219px) {
  #ad-2 { display: block; }
}
/* 容器宽度<650px时展示ad-3 */
@container (max-width: 649px) {
  #ad-3 { display: block; }
}

对应的HTML结构参考：

<div class="ad-container">
  <div id="ad-1"><!-- 1220x350广告内容 --></div>
  <div id="ad-2"><!-- 650x190广告内容 --></div>
  <div id="ad-3"><!-- 300x250广告内容 --></div>
</div>

优点：原生CSS实现，窗口/容器尺寸变化时自动切换，无额外性能开销

方案2：JS监听容器尺寸（兼容老旧浏览器） #

如果需要兼容IE等不支持容器查询的老旧环境，可以用ResizeObserver监听容器宽度，动态切换广告：

const adContainer = document.querySelector('.ad-container');
// 广告尺寸和对应DOM的映射
const adMap = {
  1220: document.getElementById('ad-1'),
  650: document.getElementById('ad-2'),
  300: document.getElementById('ad-3')
};

// 隐藏所有广告
function hideAllAds() {
  Object.values(adMap).forEach(ad => ad.style.display = 'none');
}

// 匹配对应尺寸的广告
function matchAd(containerWidth) {
  hideAllAds();
  if (containerWidth >= 1220) {
    adMap[1220].style.display = 'block';
  } else if (containerWidth >= 650) {
    adMap[650].style.display = 'block';
  } else {
    adMap[300].style.display = 'block';
  }
}

// 页面加载完成后初始化匹配
window.addEventListener('load', () => {
  matchAd(adContainer.offsetWidth);
  // 监听容器尺寸变化实时更新
  const observer = new ResizeObserver(entries => {
    matchAd(entries[0].contentRect.width);
  });
  observer.observe(adContainer);
});

注意：如果需要统计广告展示埋点，可以直接在matchAd函数中加入对应的上报逻辑

注意事项 #

• 如果是第三方iframe广告，需要给每个广告容器设置对应固定宽高，避免内容溢出
• 不要用屏幕尺寸的媒体查询实现，避免广告父容器宽度和屏幕宽度不一致时匹配错误

内容的提问来源于stack exchange，提问作者Think_Twice