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.

Husbandry

What about the bounty? – Padre

@Marcos Pérez Gude: As the bounty was offered after we both posted our answers, neither of us qualifies for the 1/2 bounty auto award. Since there were no new qualifying answers, the bounty has disappeared forever. The OP was last seen during the grace period, and it looks like they've chosen not to award it manually. I can't speak for the OP, but I've never really considered my own answer to adequately solve their problem anyways. If it makes you feel better, our answers gained plenty of upvotes during the bounty period, which more than makes up for the bounty amount. – Olpe

Yes it's true, but if people don't want to give bounties I don't understand why he offers. The bounty was started by another man, not OP. – Padre

I can't give the bounty ... and as bolt said both answers were very helpful though i didn't solve my problem i decided to use min-width for all major resolutions , atleast i've understood why my attempt didn't worked,thanks to bolt. – Husbandry

@Marcos Pérez Gude: Ah, my mistake. – Olpe

Answer 1

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.

Olpe

as you can see in my question, this is exactly what i thought, still the problem persist – Husbandry

@Petru Lebada: My mistake, I forgot to actually swap them in my answer. Does it still not work for you after trying it in your own code? Also note that aspect-ratio and device-aspect-ratio are not the same thing - the latter doesn't change based on the size of the browser window, and only really works when you assume that the browser window is always maximized or in full screen (and I suspect this is why it was deprecated in the first place, because it doesn't really work that way in practice). – Olpe

yes it work now, but only because it's the last query , for example,if you move the 4/3 query at the end, it will be used , and of course that's because of the min , which also includes 16/9 , 16/10 and so on .... still can find a query only for a certain range... – Husbandry

Answer 2

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

Talesman

Because 1366/768 (1.77864...) is not exactly equal to 16/9 (1.77777...). This is precisely why the min qualifier is used, @Marcos. – Olpe

Yes, you're true, it's hard to make mediaqueries for specific resolutions, but the ratios can help you. – Padre

upvote for deprecated device aspect ratio , i didn't knew that. – Husbandry