CSS 媒体查询和广告

Question

我在我的应用程序中使用 Twitter 的引导（响应式）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;
  }