html - 在宽度相同但高度不同的媒体查询中应用样式

Question

所以我面临的问题是我有 2 个不同的媒体查询，每个媒体查询的宽度相同但高度不同，如下所示:

    @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;
               }
     }

但是发生的事情是，当我将屏幕尺寸更改为 1920 像素宽度和 1200 像素高度时，该媒体查询似乎没有覆盖另一个高度为 1080 像素的媒体查询。现在我被困在这里，无法弄清楚我犯的错误。这里有什么问题？我哪里错了？这个问题的解决方案是什么？感谢您的帮助!

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;
  }
}