css - 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;
  }