时间戳

首页 > 解决方案 > 如何制作特定于桌面的广告，而另一个特定于移动设备的广告？

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

问题描述

我知道这似乎是一个非常简单的问题，但请理解我对 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，但它似乎根本不起作用......关于为什么以及如何解决它的任何想法？

标签： cssadsense

解决方案

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

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

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

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

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

推荐阅读