在具有相同寬度但不同高度的媒體查詢中應用樣式

Question

所以我面臨的問題是我有兩個不同的媒體查詢，其中寬度相同，但高度不同，如下所示：

    @media only screen and (max-width:1920px) and (min-height:1080px){
           #home{
              height:1080px;
               }
     }
       @media only screen and (max-width:1920px) and (min-height:1200px){
           #home{
              height:1200px;
               }
     }

但是當我將屏幕尺寸更改為1920px寬度且高度為1200px時，似乎此媒體查詢不會覆蓋另一個高度為1080px的媒體查詢。 現在我被困在這里，無法弄清楚我犯的錯誤。 這是什么問題？ 我哪里錯了？ 這個問題的解決方案是什么？ 謝謝你的幫助 ！

Answer 1

媒體查詢中的世界“屏幕”有點令人困惑。 它的實際含義不是計算機屏幕分辨率，而是瀏覽器窗口的實際內部大小。 即使窗口最大化，要計算實際高度，您應該從屏幕高度折扣瀏覽器窗口標題地址欄，系統托盤等，所以如果屏幕分辨率是1200px，那么媒體查詢屏幕大小將是大約1180px。

以下代碼示例說明了該概念。 在全屏模式下查看，嘗試調整瀏覽器窗口的大小並查看顏色的變化：

 body{ background-color: yellow; } @media only screen and (max-width:1920px) and (min-height:500px){ body{ background-color: lime; } } @media only screen and (max-width:1920px) and (min-height:800px){ body{ background-color: red; } }