html - 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>