响应式横幅广告答案

【问题标题】：Responsive Banner Ads响应式横幅广告
【发布时间】：2013-10-30 18:44:38
【问题描述】：

我正在将横幅代码添加到新网站中，我需要它们做出响应。

我的顶部横幅 (728x90) 广告可以正常工作，但是当我尝试让摩天大楼响应时它不起作用。

这是我用来使横幅响应的 CSS 代码：

<style type="text/css">
    #Banner img {
        width: auto !important;
        height: auto !important;
        max-width: 95% !important;
    }

    #Banner {
        width: auto !important;
        max-width: 900px;
    }
</style>

【问题讨论】：

您需要在此处提供更多信息。响应式设计不仅仅是一件简单的事情，它是你想要的，也是你的目标。人们无法读懂你的想法。您还需要发布 HTML，因为没有 HTML 的 CSS 或明确的方向不会为您提供任何帮助
....并尝试减少 !important 声明。
我通过指定height 让它工作了。您只能获得预定义尺寸的广告。如果您想要不同尺寸的广告，请使用媒体查询并指定高度和宽度以匹配其中之一：support.google.com/adsense/answer/2953032

标签： html css ads banner

【解决方案1】：

假设您使用的是 Google Adsense：他们的 responsive ads 处于测试阶段，但据我测试，它们似乎运行良好。注意：它们并没有真正“缩放”，但它们会在不同的分辨率下发生变化。

例如：在大显示器上，我会看到一个宽泛的广告，而在一个较小的显示器上，我会看到一个小广告，但没有中间道路。

生成的代码（由 Google 提供）如下所示：

<style>
.responsive-sidebar-ad { width: 320px; height: 50px; }
@media(min-width: 500px) { .responsive-sidebar-ad { width: 468px; height: 60px; } }
@media(min-width: 800px) { .responsive-sidebar-ad { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Responsive sidebar ad -->
<ins class="adsbygoogle responsive-sidebar-ad"
     style="display:inline-block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

现在您已经有了代码，您可以根据您的设计更改媒体查询。

【讨论】：