JSFiddle - React, Tailwind, and code Playground

by Hugo Vale Pereira

HTML

<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>

CSS

@media (min-aspect-ratio: 8/5) {
  div {
    background: #9af; /* azul */
  }
}

/* Taxa de aspecto máxima */
@media (max-aspect-ratio: 3/2) {
  div {
    background: #9ff;  /* ciano */
  }
}

/* Taxa de aspecto exata, coloque-a no final para evitar sobrescrita*/
@media (aspect-ratio: 1/1) {
  div {
    background: #f9a; /* vermelho */
  }
}

.a{
  height:100px;
  width:200px;
}
.b{
  height:200px;
  width:100px;
}
.c{
  height:200px;
  width:200px;
}