Petru Lebada Petru Lebada - 3 months ago 15
CSS Question

Media queries to cover all major pc and laptops aspect ratio

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

The idea of responsive design is simply this: that your design responds to variations or even on-demand changes in the media that is consuming your design. Whether you do this by looking at screen resolution or by screen aspect ratio is entirely an implementation detail, and not very pertinent.

The ratio 16/9 evaluates to 1.777... while the ratio 16/10 evaluates to 1.6. Since the ratio 16/9 is clearly larger than 16/10, anything that is min-device-aspect-ratio: 16/9 is by necessity also min-device-aspect-ratio: 16/10.

The solution is to put the 16/10 query before the 16/9, so that all the ratios are in ascending order:

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

See my answer to this related question for an explanation of how this works.