多个 div 类不起作用答案

【问题标题】：Multiple Div Classes Not Working多个 div 类不起作用
【发布时间】：2014-11-06 23:28:24
【问题描述】：

我在网站上工作时似乎遇到了障碍。

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

到目前为止，一切看起来都不错；我已经像这样设置了所有的 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，检查拼写，一切......非常感谢任何帮助，谢谢！

【问题讨论】：

您希望发生什么，会发生什么？
我想要它，这样当有人在移动设备上查看具有最小宽度：0 像素和最大宽度：480 像素的网站时，他们不会看到任何其他广告设备。详细地说，我在一个页面上的 5 个单独的 div 中有 5 个不同尺寸的不同广告，它们现在都显示在我的手机上。我只想看一个。
我认为您的逻辑在这里是错误的，并且不尊重“移动优先”的方法。您基本上应该默认隐藏它并在更大的设备上显示它。
Bartdude，你能再详细点吗？如果我理解正确，您的意思是默认隐藏所有其他类。但这是我发现隐藏其他类的唯一方法，因为目前所有类都绕过@media 屏幕并在大多数设备上显示。

标签： css mobile responsive-design ads

【解决方案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;
   }
}

【讨论】：

【解决方案2】：

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

注意：class不是id！

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

id normaly 是一个唯一值 es: id="secondary" 并且可以在 css 中用 #id (es: #secondary) 引用

【讨论】：

【解决方案3】：

感谢各位大侠的帮助，我明白了。我相信这是空间错误和对类/div差异的误解的混合。在缩短类名并进行少量测试后，我可以确认正确的广告在每台设备上都正确显示。

供他人参考：

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

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

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

注意，每个类（桌面、小桌面、大手机、手机）都有 display: none;在他们指定的@media 大小下的 css 中，这意味着如果媒体大小不符合要求，它们一旦包含在 divs 类中就不会显示。总共有 5 个类别（台式机、小型台式机、平板电脑、大型手机、手机），所有类别都具有不同的尺寸参数，并且通过删除“平板电脑”，专门为平板电脑挑选的广告现在仅在平板电脑上显示，因为设备尺寸要求已也遇到过。

解释可能有点混乱，因为我今天早上刚刚重新学习了所有的类/id，但希望它会有所帮助:)

【讨论】：