Медиа-запросы не меняются должным образом

Question

Я использую медиа-запросы для управления CSS-свойствами margin-top и zoom для некоторых элементов, но по какой-то причине он не работает должным образом.

Это мои медиа-запросы CSS:

/* (1440x900) WXGA+ Display */
@media  screen and (max-width: 1440px) {
    .multipleVendors {
        zoom: 0.85;
    }
    .searcher {
        zoom: 0.90;
        margin-top:100px;
    }
}


/* (1920x1080) Full HD Display */
@media  screen and (max-width: 1920px) {
    .multipleVendors {
        zoom: 0.85;
    }
    .searcher {
        zoom: 0.90;
        margin-top:150px;
    }
} 

Мое текущее разрешение экрана 1920x1080 и его отличная работа (с использованием этого пользовательского запроса CSS), но когда я меняю разрешение экрана на 1440x900, оно игнорирует мой пользовательский запрос CSS и все еще использует 1920x1080.

Есть идеи, как решить эту проблему? что мне не хватает?

Спасибо

Answer 1

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

  /* (1440x900) WXGA+ Display */
@media  screen (min-width: 1200px) and (max-width: 1440px) {
    .multipleVendors {
        zoom: 0.85;
    }
    .searcher {
        zoom: 0.90;
        margin-top:100px;
    }
}


/* (1920x1080) Full HD Display */
@media  screen (min-width: 1441px)and (max-width: 1920px) {
    .multipleVendors {
        zoom: 0.85;
    }
    .searcher {
        zoom: 0.90;
        margin-top:150px;
    }
} 

Answer 2

Второй медиа-запрос переопределяет первый из-за каскадной природы CSS. Это должно работать, если вы просто измените порядок объявлений.

/* (1920x1080) Full HD Display */
@media  screen and (max-width: 1920px) {
    .multipleVendors {
        zoom: 0.85;
    }
    .searcher {
        zoom: 0.90;
        margin-top:150px;
    }
} 

/* (1440x900) WXGA+ Display */
@media  screen and (max-width: 1440px) {
    .multipleVendors {
        zoom: 0.85;
    }
    .searcher {
        zoom: 0.90;
        margin-top:100px;
    }
}