Почему нижний медиа-запрос не перекрывает верхний?

Question

[KrisTeylor]

Вот такие стили

.picture {
    width: 100%;
    height: 40vw;
    background-color: black;
}
@media screen and (min-aspect-ratio: 1/1) {
    @media (min-width: 480px) {
        .picture {
            height: 40vh;
            max-height: 50vw;
            background-color: blue;
         }
    }
    @media (min-width: 768px) {
        .picture {
            background-color: yellow;
        }
    }
}

Вот такое фиаско:

Выставляю разрешение 768 на 480, видно что браузер обнаружил медиа-запрос, но почему он перекрыт предыдущим я не пойму.

Comments

[Liuonid]

and (max-width:767px) прописать?

[KrisTeylor]

Liuonid, думал об этом, но тогда код из media (min-width: 480px), который не перекрывается с 768px нужно будет продублировать.

[Ankhena]

Зависит от того как вы проверяете и что в этот момент творится с aspect-ratio

[KrisTeylor]

Ankhena, как понять "как я проверяю"? как надо? aspect-ratio больше 1.

[Ankhena]

KrisTeylor, при aspect-ratio больше единицы все прекрасно работает https://jsfiddle.net/u3mewhLs/
Т.е. если во время изменения ширины вьюпорта aspect-ratio не становится <1

[KrisTeylor]

Ankhena, не становится. Очень странная проблема.

[Ankhena]

KrisTeylor, вы же видите, что в песочнице норм.

Значит, вам нужно сделать песочницу, в которой видна ваша проблема.

Answer 1

[Name_23]

Это связано со спецификацией и приоритетностью. Почитайте эти статьи
https://overcoder.net/q/1381887/
https://coderoad.ru/35854691/
https://developer.mozilla.org/ru/docs/Learn/CSS/Bu...