CSS медиа-запрос с максимальной высотой и максимальной шириной не работает

Question

Я использую медиазапросы в следующем порядке:

@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 всегда срабатывает. Я что-то неправильно понимаю?

Answer 1

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

Можете ли вы попробовать следующий пример?

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

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

В этом случае у нас нет тех же пикселей, что и max-width.

Подробнее о медиазапросах можно узнать здесь: https://www.w3schools.com/CSS/css3_mediaqueries_ex.asp