CSS @Media 无法正常工作

Question

我有一段 CSS 似乎不起作用，我不知道为什么。 - 我正在使用 Dreamweaver CC 和多个浏览器，结果是一样的。

HTML

<div class="requirements-bulletdetail hide-desktop-wide show-desktop hide-tablet hide-phone" id="left_SubPanel_Training"
    style="display:none;">
    Each MOT tester must complete a minimum of 3hrs (180 mins) of training as per the cirruculum set down by the DVSA each year.
    It's important to note that if an MOT tester is dual class (Classes 1 &amp; 2 (GROUP A) AND Classes 3 to 7 GROUP B) then
    that tester MUST complete a minimum of 3hrs (180 mins) for EACH class group.
    <a href="#none" class="innerproductlink" onClick="switcherRooLeft('subPanelTraining')" id="SubPanelLink_Training">Learn About Training ...</a>
</div>

<!-- DESKTOP WIDE-->
<div class="requirements-bulletdetail hide-desktop-wide hide-desktop hide-tablet hide-phone" id="left_SubPanel_Training"
    style="display:none;">
    Each MOT tester must complete a minimum of 3hrs (180 mins) of training <br/>as per the cirruculum set down by the DVSA
    each year. It's important to note that if an MOT tester is dual class (Classes 1 &amp; 2 (GROUP A) AND Classes 3 to 7
    GROUP B) then that tester MUST complete a minimum of 3hrs (180 mins) for EACH <br/>class group.
    <a href="#none" class="innerproductlink" onClick="switcherRooLeft('subPanelTraining')" id="SubPanelLink_Training">Learn About Training ...</a>
</div>

CSS

.hide-desktop {
    display: none;
}

.show-desktop {
    display: inline-block;
}

@media (min-width: 960px) and (max-width:1199px) {
    .hide-desktop-wide {
        display: none;
    }
    .show-desktop-wide {
        display: inline-block;
    }
}

问题是，即使我在两个部分都有这段代码：-

<a href="#none" class="innerproductlink" onClick="switcherRooLeft('subPanelTraining')" id="SubPanelLink_Training">Learn About Training ...</a>

它不会以任何浏览器宽度显示 - 而且...我必须保持 ID 与我的 Javascript 引用它的相同。 （无论如何，我在页面上还有其他代码元素具有重复的 ID 名称可以正常工作。

非常感谢任何帮助/想法。

谢谢

Answer 1

我建议不要使用媒体查询来隐藏和显示特定元素，而是使用它来更改样式。

div 元素类的区别是：

默认

• 隐藏桌面范围
• 显示桌面
• 隐藏平板隐藏手机

桌面

• 隐藏桌面范围
• 隐藏桌面
• 隐藏平板电脑
• 隐藏电话

您应该将这些样式移动到媒体查询中：

@media (min-width: 960px) and (max-width:1199px) {

   //hide desktop-wide, hide-desktop, hide-table, hide-phone styles here

}

这将删除 HTML 中的重复代码，并允许完全通过 CSS 控制样式。

Answer 2

您的 CSS 中缺少 !important，因为您的 display: none 是内联的，所以您必须使用它。

你的 CSS 需要是这样的：

.hide-desktop {
    display:none !important;
}

.show-desktop {
    display:inline-block !important;
}


@media (min-width: 960px) and (max-width:1199px) {

    .hide-desktop-wide {
        display:none !important;
    }

    .show-desktop-wide {
        display:inline-block !important;
    }

}

Answer 3

DOH！

我找到了解决办法！

愚蠢是我最大的技能之一！

Answer 4

.hide-desktop-wide {
    display:none;
}

你在两个 div 上都使用这个类。

<div class="requirements-bulletdetail **hide-desktop-wide** show-desktop hide-tablet hide-phone" id="left_SubPanel_Training" style="display:none;">
    Each MOT tester must complete a minimum of 3hrs (180 mins) of training as per the cirruculum set down by the DVSA each year. It's important to note that if an MOT tester is dual class (Classes 1 &amp; 2 (GROUP A) AND Classes 3 to 7 GROUP B) then that tester MUST complete a minimum of 3hrs (180 mins) for EACH class group. <a href="#none" class="innerproductlink" onClick="switcherRooLeft('subPanelTraining')" id="SubPanelLink_Training">Learn About Training ...</a>
</div>

<!-- DESKTOP WIDE-->
<div class="requirements-bulletdetail **hide-desktop-wide** hide-desktop hide-tablet hide-phone" id="left_SubPanel_Training" style="display:none;">
    Each MOT tester must complete a minimum of 3hrs (180 mins) of training <br/>as per the cirruculum set down by the DVSA each year. It's important to note that if an MOT tester is dual class (Classes 1 &amp; 2 (GROUP A) AND Classes 3 to 7 GROUP B) then that tester MUST complete a minimum of 3hrs (180 mins) for EACH <br/>class group. <a href="#none" class="innerproductlink" onClick="switcherRooLeft('subPanelTraining')" id="SubPanelLink_Training">Learn About Training ...</a>
</div>