如何制作一个针对桌面设备的广告，另一个针对移动设备的广告？

Question

我知道这可能看起来是一个非常简单的问题，但请理解我对 CSS 知之甚少。本质上，我有一个包含两列的响应式网站。我想在桌面右侧添加一个广告，在移动设备左侧添加一个广告。到目前为止一切顺利，我只需要复制和改编他们在他们网站上提供的代码，这确实适用于移动设备，隐藏了广告：

<style type="text/css">
.adslot_1 { display:inline-block; width: 320px; height: 50px; }
@media (max-width: 400px) { .adslot_1 { display: none; } }
</style>
<ins class="adsbygoogle adslot_1"
   data-ad-client="ca-pub-1234"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

但是，我该如何将其调整为桌面版？我假设我所拥有的只是将 max-width: 400px 更改为 min-width，但它似乎根本不起作用...关于原因以及如何解决的任何想法？

Answer 1

在许多情况下，动态插入内容的脚本倾向于修改元素的内联 CSS 属性，并且由于特殊性，通常会覆盖样式定义。您可以在 CSS on MDN.

中了解更多关于特异性的信息

我建议您将 !important 添加到您的样式定义中，以查看是否确实隐藏了该元素。您的样式应该类似于：（我在 @media 查询中添加了一些额外信息。

.adslot_1 {
    display:inline-block; 
    width: 320px;
    height: 50px;
}

@media only screen and (max-width: 400px) {
    .adslot_1 {
        display: none !important;
    }
}

您还可以打开浏览器的检查工具（开发人员工具）并检查该特定元素以查看应用了哪些样式，并根据媒体查询进行检查。

如何制作一个针对桌面设备的广告，另一个针对移动设备的广告？

How can I make an ad specific to desktop, and another to mobile?

css

adsense