Question

我在网站上工作时似乎遇到了麻烦。

我要做的是仅在某些设备上展示特定尺寸的广告（小广告=移动广告，大型广告=桌面广告等等）并让它们显示：在某个像素之外的所有其他设备上均为无范围。

到目前为止，一切看起来都不错;我已经设置了所有的css类：

@media screen and (min-width: 601px) and (max-width: 799px) {
  .site-main {
     margin: 0;
   }

   #secondary {
     clear: both;
     float: none;
     width: auto;
     display: none;
   }

  .tablet-only-ad {
     display:none !important;
   }
}

一切正常，直到我进入实际的广告div ...当前的div设置如下：

<div id="desktop-only-ad small-desktop-only-ad tablet-only-ad large-phone-only-ad">
<script>
ad script blah blah blah
</script>
</div>

我已经尝试将所有ID复制到一个类中，尝试将类和ID，拼写检查，所有内容...任何帮助都非常感谢，谢谢！

Answer 1

对于初学者，您的广告位于ID中，因此要显示/隐藏此广告，您需要在CSS中定位ID，而不是类，即

@media screen and (min-width: 601px) and (max-width: 799px) {  
....
#tablet-only-ad {       /* note ID not a class */
     display:none !important;
   }
}

Answer 2

<div class="desktop-only-ad small-desktop-only-ad tablet-only-ad large-phone-only-ad">

注意：类不是ID！

class属性可以支持多个值分隔的空格，并且可以在css文件中引用一个类，一个点（es： .small-desktop-only-ad ）

id normaly是一个唯一值es：id =＆＃34; secondary＆＃34;并且可以使用#id（es：#secondary）

在css中引用

Answer 3

感谢帮助人员，我明白了。我认为这是空间错误和对类/ div差异的误解的混合。在缩短班级名称和一小部分测试后，我可以确认正确的广告在每台设备上都能正确显示。

供其他人参考：

检查您的班级名称并尽可能缩短它们以防止拼写或空格错误。
一个页面上只能有一个ID，但有多个类。我需要将ID更改为CLASS才能使多个类工作。

以下是其中一个已完成的div的示例：

<div class="desktop small-desktop large-phone phone">
<script>
AD SCRIPT
</script>
</div>

注意，每个类（桌面，小桌面，大型手机，手机）都有display：none;在他们指定的@media大小的css中，这意味着如果媒体大小不符合要求，它们将不会显示在divs类中。总共有5个类别（台式机，小型台式机，平板电脑，大型电话，手机）都具有不同的尺寸参数，并且通过取消“平板电脑”专门为平板电脑挑选的广告现在仅在平板电脑上显示，因为设备尺寸要求已经也得到了满足。

这个解释可能有点令人困惑，因为我今天早上重新学习了所有的课程/ ID，但希望它会有所帮助：）

多个Div类不起作用

3 个答案: