Несколько медиа-запросов, выполняющихся одновременно для разных элементов страницы - PullRequest
Новая
       4

Несколько медиа-запросов, выполняющихся одновременно для разных элементов страницы

0 голосов
/ 07 апреля 2020

В медиа-запросах происходит что-то странное, разные медиа-запросы одновременно применяются к разным элементам страницы. Я понятия не имею, почему и даже не уверен, какой код я должен показать для этого. Мои медиа-запросы правильно сложены

Вот два моих медиа-запроса, один из рассматриваемых элементов - ImagePath, 913px перекрывает 969px. Когда я проверяю древовидный список и 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;
    }
}

Ответы [ 2 ]

0 голосов
/ 07 апреля 2020

Вы можете использовать этот код: 

@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;
    }
}
0 голосов
/ 07 апреля 2020

Проблема с вашими медиа-запросами объяснена ниже: 

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