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

Question

有人要求我在屏幕宽度进入 iPad 范围时让这个论坛的标语 "Powering the safety revolution" 消失。为了进行测试，我使用 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 window 大小如何，max-device-width 都无济于事。

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

Why won't my media query work?

css

media-queries

phpbb3