CODEWITHSUNDEEP
cssresponsive-designmedia-queriesscreen-resolutionaspect-ratio
Petru Lebada
Petru Lebada

Reputation: 1682

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.

Upvotes: 12

Views: 5206

Answers (2)

BoltClock
BoltClock

Reputation: 724342

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.

Upvotes: 14

Marcos Pérez Gude
Marcos Pérez Gude

Reputation: 22158

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.

Upvotes: 14

Related Questions