我正在将横幅代码添加到新网站中,我需要它们具有响应能力。
我的顶部横幅 (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>
假设您正在使用 Google Adsense:他们的响应式广告尚处于测试阶段,但据我测试,它们似乎运行良好。注意:它们并没有真正“缩放”,但它们会根据不同的分辨率而改变。
例如:在大显示器上,我会看到宽幅广告,在较小的显示器上,我会看到小广告,但没有中间道路。
生成的代码(由 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>
现在您已经有了代码,您可以根据您的设计更改媒体查询。