CSS媒体查询不同的结果

为什么DIV在手机和调整大小的桌面窗口上显示不同？CSS媒体查询不同的结果

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

这是我需要的...当看到在桌面上大小的窗口是好的，但手机是不

来源

2016-01-29 Volkan

你肯定'高度：0像素重要;再次'！？ –

手机的分辨率是多少？它可能超过'440px'宽 – Rhumborl

在这两个媒体查询中，规则是一样的，我怀疑你真的想'height：0px;'你应该使用@media（max-width：327px）{'if这两个规则是相同的 – miguelmpn

这可能是因为你的手机宽度大于327px，所以规则不是活跃在您的手机

选中此：https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

来源

2016-01-29 11:52:02 IAmJulianAcosta

好吧，所以我的手机屏幕的宽度是360px ...高度显示...但在桌面上，它不是（我调整到360px） – Volkan

尝试更换'高度：0％'宽度' border：solid thin red'来检查高度是不是工作或问题是媒体查询 – IAmJulianAcosta

高度正在工作......但它不显示相同...在手机上它显示（额外的丑陋空间），而在桌面这是好的...真的很奇怪.. – Volkan

重要是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;} 
}

来源

2016-01-29 11:52:22

我知道，谢谢，但我不得不覆盖原来的代码.... – Volkan

我已更新答案 –

谢谢你尝试..仍然相同.. – Volkan

尝试将此

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

来源

2016-01-29 12:06:50

CSS媒体查询不同的结果

回答

相关问题