css - 为什么我的媒体查询不起作用？

Question

当屏幕宽度进入 iPad 范围时，我被要求让这个论坛的口号“插入安全革命”消失。为了进行测试，我使用 750 像素作为屏幕宽度。达到或低于该值，我希望它消失。

http://brightideasforum.unitedsafety.net/phpbb3

代码是有的，但是display:none在我把屏幕尺寸拖到750像素以下时不生效。

这是一个 phpBB 3.0 论坛。我已经刷新了模板和主题，清除了缓存，清除了我的浏览器缓存。

CSS 在这里:

http://brightideasforum.unitedsafety.net/phpbb3/style.php?id=2&lang=en

适用的 CSS:

#powering-top{
    height:auto; 
    float:right; 
    clear:both;
}
#powringbox-box {
    color: #000;
    position: relative;
    margin-right: 5px;
    margin-top:0px;
    display: block;
    float: right;
    text-align: right;
    white-space: nowrap; /* For Opera */
}
#powringbox-box h2{
    float:right;
    margin-right:0px !important;
}

@media only screen and (max-device-width : 750px) {
    #powringbox-box {
        display: none;
    }

Answer 1

使用 max-width 而不是 max-device-width。

正如@showdev 上面评论的那样，使用 max-width 更适合您的情况(以及大多数情况)。除非您真的关心我的显示器的尺寸，无论您的 BROWSER 窗口大小如何，max-device-width 都无济于事。