CSS 媒体查询和广告

Question

我在我的应用程序中使用 Twitter 的 Bootstrap (响应式)CSS。我想在我的侧边栏中放置横幅广告，但根据哪个媒体查询处于事件状态，我的侧边栏将具有不同的宽度，这意味着我的横幅广告也需要具有不同的宽度。

您如何建议我根据当前活跃的媒体查询来更换横幅广告？我知道我可以使用 jQuery 来观察浏览器宽度的变化并以这种方式将它们换掉，但是有没有现有的解决方案，比如 jQuery 插件？

Answer 1

这基本上已经内置到 Twitter Bootstrap 中。 Bootstrap 有几个名为 .visible- 和 .hidden- 的类，它们与 phone、tablet 结合使用和 desktop 在不同设备上显示和隐藏元素。

然后您只需包含 X 个不同版本的横幅，例如:

<div class="ads">
    <img class="visible-phone" src="smallest.png"/>
    <img class="visible-tablet" src="medium.png"/>
    <img class="visible-desktop" src="large.png"/>
</div>

当然，如果您想为媒体查询设置自定义 css 属性，那么您可以添加自己的属性。 Bootstrap 是这样做的:

@media (min-width: 768px) and (max-width: 979px) {
  .visible-tablet {
    display: block;
  }
  ...
  .visible-desktop {
    display: none;
  }