Media queries to cover all major pc and laptops aspect ratio

Question

I want to build some media queries to cover most of the aspect ratio out there for pc/laptops.

My first attempt was this:

@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';
     }
 }

I was testing those queries from a laptop with a resolution of 1366x768 which is 16/9 aspect ratio , instead of this, the last query of 16/10 is executed.

I could do this in the classic way , with:

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

but i think the responsive design should focus more on aspect ratio rather than screen width , because it's a big difference beetween 4:3 and the wide ones 16/9 , or maybe i've misunderstood the responsive design concept but this is what i think.

Answer 1

To solve executing 16/10 when 16/9 is active, you must to define device-aspect-ratio instead of min-device-aspect-ratio, because you are telling the browser that both of them (16/10 and 16/9) are valid codes, and it executes the last defined.

 @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 */
 }

Edition

As God (MDN) said, device-aspect-ratio is deprecated and we must use aspect-ratio instead. It accepts min and max prefixes.

• Media Queries: device-aspect-ratio
• Media Queries: aspect-ratio