更新

Question

我正在尝试在我的网站上显示自适应的Google广告。包含Google广告代码的框也具有响应性，并根据Google's Ad unit sizes将自身转换为不同的尺寸。

因此，对于不同的屏幕尺寸，我会在该页面中显示适合的广告尺寸，如此（广告空间完整无效）：

.ads {
    width: 733px;
    height: 116px;
    margin: 70px 0 0 30px;
    border: 2px solid @dry-red;
    background-color: white;
    padding: 0;
    border-radius: 4px;
    margin-right: 15px;
    float: right;

    .headline {
        background-color: @dry-red;
        width: 100%;
        font-size: .8em;
        padding: 2.5px 0 2.5px 4px;
        color: white;
        margin: 0;
        border-bottom: 1px solid @dry-red-xl;
    }

    @media (max-width: 1200px){
        width: 468px;
        height: 86px;
    }

    @media (max-width: 992px){
        width: 323px;
        height: 126px;
    }

    @media (max-width: 768px){
        width: 468px;
        height: 61px;
        margin: 50px 20px;
        float: none;
    }

    @media (max-width: 766px){
        margin: 5px auto 5px auto;
    }

    @media (max-width: 470px){
        /* display: none; */
        width: 323px;
        height: 126px;
    }
}

到目前为止一切顺利。盒子达到峰值时会变形。请注意，Google的原始广告尺寸增加了约26px +，以便与.headline一致。

现在，我已将Google广告单元的代码放在HTML中，如下所示：

<section class="ads col-lg-8 col-md-7 col-sm-7">
    <div class="headline">Advertisement</div>
    <!-- IMGzer_Header --> 
    <style type="text/css">
        .adslot_1 { width: 728px; height: 90px; }
        @media (max-width:470px) { .adslot_1 { width: 320px; height: 100px; } }
        @media (max-width:768px) { .adslot_1 { width: 468px; height: 60px; } }
        @media (max-width:992px) { .adslot_1 { width: 320px; height: 100px; } }
        @media (max-width:1200px) { .adslot_1 { width: 468px; height: 60px; } }
    </style>
    <ins class="adsbygoogle adslot_1" style="display:inline-block" data-ad-client="SOME_NUMBER" data-ad-slot="SOME_NUMBER"></ins>
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> 
    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</section>

您可能会注意到，我尝试过使用两种变体：

使用CSS3媒体查询（已注释）
并使用data-ad-format="horizontal"数据属性。

我已在此Google Ads article中了解了这两个。

这些都不起作用，我的广告尺寸仍为728x90px。当浏览器屏幕较小时，我的Google广告根本不会调整到各自的大小。

理解和帮助将不胜感激。

My actual website having this problem

更新

所以我玩过，但仍然没有取得任何成果。我试图接近Google的示例，并在媒体查询中使用min-width而不是max-width。没有结果。我仍然会获得 728x90 大小，即使它除了min-width: 1200px媒体查询之外没有包含在其他任何地方，但它仍然拒绝调整大小。这真是太刺激了。

<section class="ads col-lg-8 col-md-7 col-sm-7">
    <div class="headline">Advertisement</div>
    <style>
        .adslot_1 { width: 320px; height: 100px; }
        @media (min-width: 768px) { .adslot_1 { width: 468px; height: 60px; } }
        @media (min-width: 992px) { .adslot_1 { width: 320px; height: 100px; } }
        @media (min-width: 1200px) { .adslot_1 { width: 728px; height: 90px; } }
    </style>
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> 
    <!-- IMGzer_Header -->
    <ins class="adsbygoogle adslot_1" style="display:inline-block" data-ad-client="ca-pub-1234" data-ad-slot="XXXXXX"></ins>
    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</section>
<div class="clearfix"></div>

.ads的CSS / LESS仍与上述相同。我注意到的事情是当我通过Firebug检查我的代码时，我看到了这一行：

<ins data-ad-slot="XXXXX" data-ad-client="ca-pub-1234" style="display: inline-block; width: 728px; height: 90px;" class="adsbygoogle adslot_1" data-adsbygoogle-status="done"><ins style="display:inline-table;border:none;height:90px;margin:0;padding:0;position:relative;visibility:visible;width:728px;background-color:transparent"><ins style="display:block;border:none;height:90px;margin:0;padding:0;position:relative;visibility:visible;width:728px;background-color:transparent" id="aswift_0_anchor"><iframe width="728" scrolling="no" height="90" frameborder="0" style="left:0;position:absolute;top:0;" name="aswift_0" id="aswift_0" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" allowtransparency="true" hspace="0" vspace="0" marginheight="0" marginwidth="0"></iframe></ins></ins></ins>

这段代码的宽度和高度在哪里？宽度 728 ，高度 90 。这就像他们以某种方式固定在那里，他们完全无视我的媒体查询。我绝对相信我会在AdSense设置中选择响应式广告单元。

我没看到什么？

Answer 1

类（.）小于ID（#）（样式条款）。谷歌广告有自己的样式写在JS。

<div class="least" id="medium"></div>

<style type="text/css">
     .least{
               width:100px;
               height:100px;
               background-color:red;
           }
     #medium{
               width:200px;
               height:200px;
               background-color:green;
           }
</style>

处理Google广告样式的最佳方式

<div id="google-ads-1"></div>

 //Calculate the width of available ad space:

<script type="text/javascript"> 
      ad = document.getElementById('google-ads-1');

      if (ad.getBoundingClientRect().width) {
          adWidth = ad.getBoundingClientRect().width; // for modern browsers 
      } else {
          adWidth = ad.offsetWidth; // for old IE 
      }

      /* Replace ca-pub-XXX with your AdSense Publisher ID */ 
            google_ad_client = "ca-pub-XXX";

      /* Replace 1234567890 with the AdSense Ad Slot ID */ 
            google_ad_slot = "1234567890";

      /* Do not change anything after this line */
            if ( adWidth >= 728 )
        google_ad_size = ["728", "90"];  /* Leaderboard 728x90 */
      else if ( adWidth >= 468 )
        google_ad_size = ["468", "60"];  /* Banner (468 x 60) */
      else if ( adWidth >= 336 )
        google_ad_size = ["336", "280"]; /* Large Rectangle (336 x 280) */
      else if ( adWidth >= 300 )
        google_ad_size = ["300", "250"]; /* Medium Rectangle (300 x 250) */
      else if ( adWidth >= 250 )
        google_ad_size = ["250", "250"]; /* Square (250 x 250) */
      else if ( adWidth >= 200 )
        google_ad_size = ["200", "200"]; /* Small Square (200 x 200) */
      else if ( adWidth >= 180 )
        google_ad_size = ["180", "150"]; /* Small Rectangle (180 x 150) */
      else
        google_ad_size = ["125", "125"]; /* Button (125 x 125) */

      document.write (
       '<ins class="adsbygoogle" style="display:inline-block;width:' 
        + google_ad_size[0] + 'px;height:' 
        + google_ad_size[1] + 'px" data-ad-client="' 
        + google_ad_client + '" data-ad-slot="' 
        + google_ad_slot + '"></ins>'
      );

      (adsbygoogle = window.adsbygoogle || []).push({});

</script>


<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script>

轻松查看documentation。

显示自适应Google广告 - CSS问题

更新

1 个答案: