Медиа-запросы для охвата всех основных пропорций для ПК и ноутбуков

Я хочу создать несколько медиа-запросов, чтобы охватить большую часть формата изображения для ПК/ноутбуков.

Моя первая попытка:

@media screen and (min-device-aspect-ratio: 4/3){
     header::after{
         content: '4/3';
     }

 }

@media screen and (min-device-aspect-ratio: 16/9){
      header::after{
         content: '16/9';
     }
 }

 @media screen and (min-device-aspect-ratio: 16/10){
      header::after{
         content: '16/10';
     }
 }

Я тестировал эти запросы с ноутбука с разрешением 1366x768, который равен 16/9, вместо этого выполняется последний запрос 16/10.

Я мог бы сделать это классическим способом, используя:

@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

но я думаю, что отзывчивый дизайн должен больше фокусироваться на соотношении сторон, а не на ширине экрана, потому что это большая разница между 4: 3 и широкими 16/9, или, может быть, я неправильно понял адаптивную концепцию дизайна, но это что я думаю.

Ответ 1

Идея гибкого дизайна заключается в следующем: ваш дизайн реагирует на изменения или даже изменения по требованию в среде, которая потребляет ваш дизайн. Независимо от того, выполняете ли вы это, глядя на разрешение экрана или соотношение сторон экрана, это полностью детализация реализации и не очень уместна.

Отношение 16/9 оценивается до 1,777..., тогда как отношение 16/10 оценивается до 1,6. Поскольку соотношение 16/9 явно больше 16/10, все, что min-device-aspect-ratio: 16/9, по необходимости также min-device-aspect-ratio: 16/10.

Решение состоит в том, чтобы поставить запрос 16/10 до 16/9, так что все отношения находятся в порядке возрастания:

@media screen and (min-device-aspect-ratio: 4/3) {
    header::after {
        content: '4/3';
    }
}

@media screen and (min-device-aspect-ratio: 16/10) {
    header::after {
        content: '16/10';
    }
}

@media screen and (min-device-aspect-ratio: 16/9) {
    header::after {
        content: '16/9';
    }
}

См. мой ответ на этот связанный вопрос для объяснения того, как это работает.

Ответ 2

Чтобы выполнить выполнение 16/10, когда активен 16/9, вы должны определить device-aspect-ratio вместо min-device-aspect-ratio, потому что вы сообщаете обозревателю, что оба из них (16/10 и 16/9) действительны коды, и он выполняет последние определенные.

 @media screen  and (device-aspect-ratio: 16/9) {
     /* execute only in 16/9 */
 }

 @media screen  and (device-aspect-ratio: 16/10) {
     /* execute only in 16/10 */
 }

Издание

Как сказал Бог (MDN), device-aspect-ratio устарел, и вместо этого мы должны использовать aspect-ratio. Он принимает префиксы min и max.