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

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

моя первая попытка была такой:

@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 , или, может быть, я неправильно понял концепцию отзывчивого дизайна, но это то, что я думаю.

13
aspect-ratio css media-queries responsive-design screen-resolution

2 ответов

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

коэффициент 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';
    }
}

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

14

чтобы решить выполнение 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 устарела и мы должны использовать . Он принимает min и max префиксы.

15