javascript - 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 相同。 (无论如何，我在页面上还有其他代码元素具有重复的 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 控制样式。