如何在媒体查询中使用两个纵横比？

在CSS媒体查询中，可以使用aspect-ratio属性来指定元素的纵横比。如果你想在媒体查询中使用两个不同的纵横比，可以使用and运算符来组合多个条件。

以下是一个示例，展示了如何在媒体查询中使用两个不同的纵横比：

/* 针对宽度大于高度的元素 */
@media (min-aspect-ratio: 16/9) {
  .element {
    background-color: blue;
  }
}

/* 针对宽度小于高度的元素 */
@media (max-aspect-ratio: 16/9) {
  .element {
    background-color: red;
  }
}

在这个示例中，我们使用了两个媒体查询：

1. @media (min-aspect-ratio: 16/9)：当元素的纵横比大于或等于16:9时，应用蓝色背景。
2. @media (max-aspect-ratio: 16/9)：当元素的纵横比小于或等于16:9时，应用红色背景。

如果你需要更复杂的条件组合，可以使用and运算符来组合多个媒体查询条件。例如：

/* 针对宽度大于高度且宽度大于600px的元素 */
@media (min-aspect-ratio: 16/9) and (min-width: 600px) {
  .element {
    background-color: green;
  }
}

/* 针对宽度小于高度且宽度小于600px的元素 */
@media (max-aspect-ratio: 16/9) and (max-width: 600px) {
  .element {
    background-color: yellow;
  }
}

在这个示例中，我们使用了and运算符来组合纵横比和宽度条件：

1. @media (min-aspect-ratio: 16/9) and (min-width: 600px)：当元素的纵横比大于或等于16:9且宽度大于600px时，应用绿色背景。
2. @media (max-aspect-ratio: 16/9) and (max-width: 600px)：当元素的纵横比小于或等于16:9且宽度小于600px时，应用黄色背景。

通过这种方式，你可以灵活地组合多个媒体查询条件，以适应不同的布局需求。