取决于窗口宽度的一两个广告 - 可能吗？答案

【问题标题】：One or two ads depending on window width - is it possible?取决于窗口宽度的一两个广告 - 可能吗？
【发布时间】：2020-10-19 15:27:09
【问题描述】：

我希望你能帮我解决这个问题，因为我对 HTML、CSS 等知之甚少。基本上，我和我的朋友有一个网站 (https://www.mitologia.pt/)，我们正在使用 Adsense。在页面底部，我们想添加一个匹配广告和一个展示广告，但现在一个接一个（看起来很糟糕）。相反，我们想这样做：

如果窗口宽度小于 500 像素，则只能看到匹配的广告；
如果窗口宽度超过 500 像素，无论窗口大小如何，我们都希望在右侧展示 300x250 展示广告，并将所有剩余空间用于匹配广告（左侧）。

可以这样做吗？如果是这样，怎么做？这是我目前的解决方案，它适用于超过 500 像素，但在它下面根本不起作用......

    <div style="margin-top: -12px; float: left; width: calc(100% - 300px);">
<!-- Recommendations -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="XXX"
     data-ad-slot="YYY"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script> <br />
 </div>
 <!-- THIS IS FOR THE AD ON THE RIGHT -->
 <div style="margin-top: -12px; float: right; width: 300px;">
 <!-- fim da página -->
<style type="text/css">
.adslot_1 { display:inline-block; width: 300px; height: 250px; }
@media (max-width:500px) { .adslot_1 { display: none; } }
@media (min-width:500px) { .adslot_1 { width: 300px; height: 250px; } }
</style>
<ins class="adsbygoogle adslot_1"
   data-ad-client="XXX"
   data-ad-slot="YYY"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script> <br />
 </div>

【问题讨论】：

阅读一些关于@media的信息，例如从这里w3schools.com/css/css3_mediaqueries_ex.asp，如果出现任何问题，只需添加您尝试做的事情，但没有成功
@Kida，我刚刚将我当前的解决方案添加到初始帖子中。它适用于超过 500 像素，但不适用于它...
如果你的代码没有工作 sn-p 我只是在猜测，但首先你的@media max-width 与 min-width 相同，因此它们可能会覆盖彼此。我会尝试更改其中之一，例如最大宽度 501px。另一个问题可能是您的@media 的顺序，也许它应该首先是最小宽度。最后一个也许你应该在新的宽度值旁边使用 !important 以确保任何其他 css 样式都不会覆盖你的 @media
@Kida，幸运的是现在一切正常。我的大问题是，在 500 像素以下的设备中，左侧的尺寸仍被计算为“calc(100% - 300px)”。我想我在这里需要一个条件......但我不太擅长这些事情。 :(
嗯，!important 似乎不会覆盖您的内联书写样式。也许尝试在 css .calculated {width: calc(100% - 300px);} 中创建一个类并将这个类添加到 div 而不是内联样式。然后，如果您的@media 中有!important，您可以将相同的类更改为值，它应该很好地覆盖它

标签： html css adsense

【解决方案1】：

好的，这就是你的内联样式 div：

<div style="margin-top: -12px; float: left; width: calc(100% - 300px);">

我的想法是试试这个：

<div class='yourNameOfClass' style="margin-top: -12px; float: left;">
<style type="text/css">
    .yourNameOfClass
    {
       width: calc(100% - 300px);
    }
    @media (max-width:500px) 
    {
      .yourNameOfClass
      {
         width: /*wharever you wish here*/!important;
      }
    }
</style>

问题是我在你的网站上看不到任何广告，所以我无法准确想象问题

【讨论】：

感谢您的帮助！我不得不做一些额外的编码更改，但最终您的解决方案使一切正常！

【解决方案2】：

在@Kida 的帮助下，我终于解决了这个问题。这是最终的代码，因为它将来可能会帮助其他人：

<div class='leftBottomAd' style="float: left;">
<style type="text/css">
    .leftBottomAd { width: calc(100% - 300px); }
    @media (max-width:800px){ .leftBottomAd { width: 100% !important;}}
</style>
<!-- Recommendations -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="XXX"
     data-ad-slot="YYY"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>  </div>

<div style="float: right; width: 300px;">
 <!-- Bottom Ad -->
<style type="text/css">
.adslot_1 { display:inline-block; width: 300px; height: 250px; }
@media (max-width:800px) { .adslot_1 { display: none; } }
@media (min-width:800px) { .adslot_1 { width: 300px; height: 250px; } }
</style>
<ins class="adsbygoogle adslot_1"
   data-ad-client="XXX"
   data-ad-slot="YYY"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script> <br/></div>

【讨论】：