CSS 媒体查询不同的结果

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

可能是您的手机宽度超过 327 像素，因此该规则在您的手机中未处于活动状态

检查这个： 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;}
}