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

【问题标题】：Multiple media queries running at the same time for different page elements同时针对不同的页面元素运行多个媒体查询
【发布时间】：2020-04-08 02:59:21
【问题描述】：

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

这是我的两个媒体查询，其中一个有问题的元素是 ImagePath，913px 覆盖了 969px。当我检查 treelist 和 TreeSelectItems 时，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;
    }
}

【问题讨论】：

@ZohirSalak，我猜你错过了我提到我不确定要显示什么代码的部分
关于媒体查询的问题明显显示您认为正确堆叠的媒体查询，因为其他人可能会看到您没有看到的东西。
@ZohirSalak，谢谢。我现在就这样做
你必须提供一个代码 sn-p 来说明这个问题，还要使用 max-height 来表示预期的媒体？
@ZohirSalak，是的，最大高度是有意的。宽度工作正常。我必须使用 heights，因为它是一个使用 kendo ui 框架而不是网站的 Web 应用程序。有许多不同的元素，也使用剑道分割器。因此，在 4k 分辨率和其他所有分辨率下，高度都是一个主要问题

标签： css media-queries

【解决方案1】：

您可以使用此代码：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

必须使用 max-height 因为宽度不是问题
我的错，我已经修复了代码。你现在可以测试它，我认为它会解决问题