Difference Between Aspect-Ratio and Device-Aspect-Ratio in CSS Media Queries

Difference between aspect-ratio and device-aspect-ratio in CSS media queries

aspect-ratio

Describes the aspect ratio of the targeted display area of the output device. This value consists of two positive integers separated by a slash ("/") character. This represents the number of horizontal pixels over the number of vertical pixels.

Source.

device-aspect-ratio

Describes the aspect ratio of the output device. This value consists of two positive integers separated by a slash ("/") character. This represents the number of horizontal pixels over the number of vertical pixels.

Source.

How do i use two aspect-ratios in a media query?

Firefox only works at the exact ratios for me.

A ratio is not a value on its own, rather, its the result of a computation. I don't believe any CSS engine is designed to compute the current aspect ratio and compare it between two potential values, it only works with the currently computed ratio. You would be able to accomplish this in javascript if you applied a listener to the window resize event.

To do it in CSS you would need to create multiple media queries that define a min-height, max-height, min-width, max-width along with a single ratio to create a range.

Interesting question though, never thought to try a aspect ratio range before. Would be useful to implement.

Media queries to cover all major pc and laptops aspect ratio

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.

Exclusive Aspect Ratio Media Query

After a bit of testing, it turns out you don't need to change a thing:

@media (min-aspect-ratio: 8/5) {...}
@media (max-aspect-ratio: 8/5) {...}

I made a demo. Open it in full size and resize the browser. They'll never be both the same (true or false).

body {margin: 0;}

.\31\30\30\25 {

  display: flex;

  min-height: 100vh;

  background-color: #eee;

  justify-content: center;

}

.\35\30\25 {

  flex-basis: 50%;

  min-height: 50vh;

  border: 1px solid #eee;

  background-color: #fff;

  align-self: center;

  box-shadow: 0 1px 5px 0 rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.12);

  position: relative;

}

.\35\30\25:before, .\35\30\25:after  {

  padding: 20px;

  background-color: rgba(255,255,255,.75);

  border: 1px solid white;

  position: absolute;

  width: calc(25vw - 40px);

  box-sizing: border-box;

  color: red;

}

.\35\30\25:before {

  right: calc(100% + 20px);

  transform: translateY(-50%);

  content: 'not above 8/5';

  text-align: right;

}

.\35\30\25:after {

  left: calc(100% + 20px);

  bottom: 0;

  transform: translateY(50%);

  content: 'not below 8/5'

}

@media (min-aspect-ratio: 8/5){

  .\35\30\25:before {

    content: 'above 8/5';

    color: black;

  }  

}

@media (max-aspect-ratio: 8/5){

  .\35\30\25:after {

    content: 'below 8/5';

    color: black;

  }  

}

<div class="100%">

  <div class="50%">

  </div>

</div>

---

Related Topics