CSS 数据类型 - <ratio>

CSS 数据类型 <ratio> 用于在媒体查询中描述纵横比。

两个正整数之间的比例由 <ratio> 数据类型表示，它定义为两个数字之间用正斜杠 (/) 分隔，数字和正斜杠之间允许有空格。

媒体查询中的 <ratio> 数据类型由两个表示宽度和高度的正 <integer> 组成，后面跟着一个正斜杠 (/) 和另一个正 <integer>。您可以在正斜杠前后添加空格。
<ratio> 数据类型还包括一个正 <number>、一个正斜杠 (/) 和另一个正 <number>。现在也允许一个 <number> 作为可接受的值。

语法

<ratio> = <number [0,∞]> [ / <number [0,∞]> ]?

常见纵横比

以下是常见纵横比的列表

比例	用途	示例
4/3	20 世纪传统的电视格式。
16/9	当今的“宽屏”电视格式。
185/100=91/50	自 20 世纪 60 年代以来，电影最广泛使用的格式。
239/100	变形宽银幕电影格式。

CSS <ratio> - 基本示例

以下示例演示了在媒体查询中使用 CSS 数据类型 <ratio>。

<html>
<head>
<style>
   .content {
      text-align: center;
      padding: 20px;
      background-color: lightblue;
      border-radius: 10px;
   }
   @media screen and (min-aspect-ratio: 91/50) {
      .content {
         background-color: lightgreen;
      }
   }
</style>
</head>
<body>
   <div class="content">
   <h3>Resize your browser window to see the effect.</h3>
      <p>This content will have different background colors based on aspect ratio.</p>
   </div>
</body>
</html>

打印页面