如何制作特定于桌面的广告，而另一个特定于移动设备的广告？

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;
    }
}

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