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

世界＆＃39;屏幕＆＃39;在媒体查询中有点令人困惑。它的实际含义不是计算机屏幕分辨率，而是浏览器窗口的实际内部大小。即使窗口最大化，要计算实际高度，您应该从屏幕高度折扣浏览器窗口标题地址栏，系统托盘等，所以如果屏幕分辨率是1200px，那么媒体查询屏幕大小将是大约1180px。

以下代码示例说明了该概念。在全屏模式下查看，尝试调整浏览器窗口的大小并查看颜色的变化：

＆＃13;

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

＆＃13;

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

1 个答案: