纵横比 | @media.aspect-ratio (Media Queries) - CSS 中文开发手册

该aspect-ratio CSS @media媒体功能可用于应用基础上的纵横比视觉效果。

语法

该aspect-ratio特征被指定为<ratio> 值表示表示视口的宽高比宽高比的值。这是一个范围功能，这意味着您也可以使用前缀min-aspect-ratio和max-aspect-ratio变量分别查询最小值和最大值。

例

HTML

<div>Watch this element as you resize your viewport‘s width and height.</div>

CSS

/* Exact aspect ratio */
@media (aspect-ratio: 1/1) {
  div {
    color: red;
  }
}

/* Minimum aspect ratio */
@media (min-aspect-ratio: 8/5) {
  div {
    background: yellow;
  }
}

/* Maximum aspect ratio */
@media (max-aspect-ratio: 2/1) {
  div {
    border: 2px solid blue;
  }
}

结果

规范

浏览器兼容性