Question

为什么DIV在手机和调整大小的桌面窗口上显示不同？

@media (max-width: 327px) { 
    .header  {height: 0px !important;}
}
@media all and (min-width: 328px) and (max-width: 440px) { 
    .header  {height: 0px !important;}
}

这就是我需要的...当在桌面调整大小的窗口上查看时，它可以，但在手机上它不是

Answer 1

尝试这个

.header{height:200px; width:200px; background:red;}
 @media (max-width: 327px) {
        .header  {height: 0px;}
    }
    
    @media (max-width: 440px) {
        .header  {height: 0px;}
    }

<div class="header"></div>

Answer 2

可能是您的手机宽度超过327px，因此手机中的规则无效

请检查：https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Answer 3

！important 在CSS中是一件非常糟糕的事情，而是使用选择器。

阅读本文：https://css-tricks.com/when-using-important-is-the-right-choice/

来到你的问题

变化：

@media (max-width: 327px) { 
    .header  {height: 0px !important;}
}
@media all and (min-width: 328px) and (max-width: 440px) { 
    .header  {height: 0px !important;}
}

到：

@media all and (max-width: 327px) { 
    .header  {height: 0px !important;}
}
@media (min-width: 328px) and (max-width: 440px) { 
    .header  {height: 0px !important;}
}

CSS媒体查询不同的结果

3 个答案: