Css 针对不同页面元素同时运行的多个媒体查询

我的媒体查询中发生了一些奇怪的事情，不同的媒体查询同时应用于不同的页面元素。 我不知道为什么，甚至不知道我应该为此显示什么代码。我的媒体查询已正确堆叠

这里是我的两个媒体查询，其中一个元素是ImagePath，913px正在覆盖969px。当我检查树列表和树选择项时，969px媒体查询正在运行

@media (max-height: 969px) {
    #tabPanelAccAttMod {
        display: none;
    }
    #txtSearch {
        width: 137px !important;
    }

    #tabPanelItemAcc {
        height: 803px !important;
        /*height: calc(100vh - 166px) !important;*/
    }

    #tabPanelAccAttMod {
        height: 781px !important;
    }

    #AttachmentsGrid {
        height: 391px !important;
    }

    #AttachMods {
        width: 310px !important;
    }

    #divSplitterButtons.shift {
        right: 310px !important;
    }

    #ImagePathAttach {
        height: 253px !important;
    }

    #ImagePath {
        height: 149px !important;
    }

    #treelist {
        height: 200px !important;
    }

    #TreeSelectItems {
        height: 215px !important;
    }

    #AttachmentsGrid {
        height: 438px !important;
    }
}

@media (max-height: 913px) {
    #AttachMods {
        width: 275px !important;
    }

    #BigImage{
        width:675px !important;
    }
    #tabPanelItemAcc {
        height: 752px !important;
    }

    #ImagePath {
        height: 205px !important;
    }

    #AttachmentsGrid {
        height: 412px !important;
    }

    #BigImage.show-big-image {
        right: 273px !important;
        transition: 0.5s !important;
    }

    #ImageListViewWrapper.show-image-list {
        right: 273px !important;
        transition: 0.5s;
    }

    #txtSearch {
        width: 212px !important;
    }

    #txtAttchSearch {
        width: 212px !important;
    }
}

@media (max-height: 906px) {
    #AttachMods {
        width: 200px !important;
    }

    #BigImage.show-big-image {
        right: 198px !important;
        transition: 0.5s !important;
    }
}

---

您的媒体查询问题解释如下：

@media screen and (max-height: 969px) and (min-height: 913px) {
    // your styles
}

@media screen and (max-height: 913px) and (min-height: 906px) {
    // your styles
}

@media screen and (max-height: 906) {
    // your styles
}

您可以使用以下代码：

@media (max-height: 969px) and (min-height: 913px) {
    #tabPanelAccAttMod {
        display: none;
    }
    #txtSearch {
        width: 137px !important;
    }

    #tabPanelItemAcc {
        height: 803px !important;
        /*height: calc(100vh - 166px) !important;*/
    }

    #tabPanelAccAttMod {
        height: 781px !important;
    }

    #AttachmentsGrid {
        height: 391px !important;
    }

    #AttachMods {
        width: 310px !important;
    }

    #divSplitterButtons.shift {
        right: 310px !important;
    }

    #ImagePathAttach {
        height: 253px !important;
    }

    #ImagePath {
        height: 149px !important;
    }

    #treelist {
        height: 200px !important;
    }

    #TreeSelectItems {
        height: 215px !important;
    }

    #AttachmentsGrid {
        height: 438px !important;
    }
}

@media (max-height: 913px) and (min-height: 906px) {
    #AttachMods {
        width: 275px !important;
    }

    #BigImage{
        width:675px !important;
    }
    #tabPanelItemAcc {
        height: 752px !important;
    }

    #ImagePath {
        height: 205px !important;
    }

    #AttachmentsGrid {
        height: 412px !important;
    }

    #BigImage.show-big-image {
        right: 273px !important;
        transition: 0.5s !important;
    }

    #ImageListViewWrapper.show-image-list {
        right: 273px !important;
        transition: 0.5s;
    }

    #txtSearch {
        width: 212px !important;
    }

    #txtAttchSearch {
        width: 212px !important;
    }
}

@media (max-height: 906px) {
    #AttachMods {
        width: 200px !important;
    }

    #BigImage.show-big-image {
        right: 198px !important;
        transition: 0.5s !important;
    }
}

---

@ZohirSalak，我想你错过了我提到的关于媒体查询的问题，我不确定该显示什么代码。显然，显示了你认为正确排列的媒体查询，因为其他人可能会看到你没有看到的东西。@ZohirSalak，谢谢。我现在就这么做，你必须拿出一个代码片段来说明这个问题，并且使用

max height

作为预期的媒体？@ZohirSalak，是的，最大高度是预期的。宽度很好用。我必须使用heights，因为它是一个使用KendoUI框架的web应用程序，而不是一个网站。有许多不同的元素，并且使用剑道拆分器。因此，在4k分辨率和所有其他分辨率中，高度是一个主要问题。我们必须使用最大高度，因为宽度不是问题。我的问题是，我已经修复了代码。你现在可以测试它了我想它会解决问题的