Html 最大高度和最大宽度的CSS媒体查询不起作用

我正在使用媒体查询，顺序如下：

@media screen and (max-width: 1600px) and (max-height: 1024px) {
    .img {
        width: 150px;
    }
}

@media screen and (max-width: 1600px) and (max-height: 900px) {
    .img {
        width: 100px;
    }
}

---

当我的屏幕分辨率为1600x1024时，1600x900规则生效。当我的屏幕分辨率为1600x1024时，1600x900规则也适用。这是根据chrome中的开发者工具->元素->样式选项卡。由于某种原因，另一条规则总是被划掉。如果我切换规则的顺序，那么1600x1024规则始终生效。我是不是误解了什么

问题是您同时应用了两个规则，例如，两个规则中的最大宽度相同。还请记住，“最大宽度”的目标是指定的数字及以下，而“最小宽度”的目标是指定的数字及以上

你能试试下面的例子吗

@media screen and (max-width: 1600px) and (max-height: 1024px) {
.img {
    width: 150px;
}

@media screen and (max-height: 900px) { 
.img { 
    width: 100px; 
} 
}

在这种情况下，我们没有将相同的像素指定为“最大宽度”

---

有关媒体查询的更多信息，请参见此处：

我需要这两条规则请检查并编辑您的问题文本：您写了两次“当我的屏幕分辨率为1600x1024时，…”…您写的是屏幕分辨率，但是：您的视区（=浏览器窗口）是否始终全屏？