如何在Materialize CSS中仅为大屏幕显示静态广告位？

嘿，我来帮你搞定这个响应式广告位的问题！从你给出的代码来看，当前广告位用了hide-on-med-and-down类，这会让它在平板（中等屏幕）和手机（小屏幕）上直接隐藏，完全没发挥响应式的作用。我们可以通过调整DOM类+自定义响应式CSS来让广告位在不同屏幕尺寸下都合理显示。

第一步：调整HTML结构 #

先移除hide-on-med-and-down类，给广告容器加一个更通用的类（比如responsive-ad），同时调整栅格布局，让广告位在不同屏幕下有合适的位置：

<div class="row"> 
  <div class="col s12 m12 l10"> 
    <!-- part one -->
  </div> 
  <div class="col s12 m12 l2 responsive-ad"> 
    <!-- 300x600 ad space -->
  </div> 
</div>

这里把广告位的栅格改成col s12 m12 l2，对应Materialize框架的断点规则：

• 小屏幕（<600px）：占满整行宽度
• 中等屏幕（600px-991px）：同样占满整行（你也可以改成m3之类的，根据布局需求调整）
• 大屏幕（>=992px）：占2列，和左侧的l10刚好凑满12列栅格

第二步：添加响应式CSS #

接下来针对不同屏幕尺寸，给广告位设置合适的尺寸，同时让广告内容（比如图片、iframe）自适应容器：

.responsive-ad {
  /* 基础样式：避免布局塌陷，预留间距 */
  min-height: 50px;
  margin: 1rem 0;
}

/* 大屏幕：保持300x600的原始广告尺寸 */
@media (min-width: 992px) {
  .responsive-ad {
    width: 300px;
    height: 600px;
    margin: 0;
  }
  .responsive-ad iframe,
  .responsive-ad img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* 中等屏幕：显示横向广告（比如300x250规格） */
@media (min-width: 600px) and (max-width: 991px) {
  .responsive-ad {
    max-width: 300px;
    height: 250px;
    margin: 1rem auto; /* 居中显示更美观 */
  }
  .responsive-ad iframe,
  .responsive-ad img {
    width: 100%;
    height: 100%;
  }
}

/* 小屏幕：全屏宽度的横幅广告（比如320x50规格） */
@media (max-width: 599px) {
  .responsive-ad {
    width: 100%;
    height: 50px;
  }
  .responsive-ad iframe,
  .responsive-ad img {
    width: 100%;
    height: 100%;
  }
}

额外优化提示 #

• 如果你的广告平台支持自适应广告单元（比如部分广告联盟的响应式代码），可以直接替换广告位内的代码，它会自动根据容器尺寸调整广告样式，能大幅简化CSS代码。
• 测试时记得用浏览器开发者工具切换不同屏幕尺寸，验证布局是否符合预期，也可以根据自己的设计需求调整媒体查询的断点和广告尺寸。

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