CSS 数据类型

CSS 数据类型 <ratio> 用于描述媒体查询中的宽高比。

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

  • 媒体查询中的 <ratio> 数据类型由两个正数 <integer> 分别表示宽度和高度，后跟正斜杠 (/) 和另一个正<integer>。您可以在斜杠前后添加空格。

  • <ratio> 数据类型还包含正数 <number>、正斜杠 (/) 和另一个正值 <number>。现在也允许将一个 <number> 作为可接受的值。

语法

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

常见的宽高比

以下是常见的宽高比列表:

比率使用示例
4/320 世纪的传统电视格式。CSS 数据类型 <ratio>
16/9当今的"宽屏"电视格式。CSS 数据类型 <ratio>
185/100=91/50自 20 世纪 60 年代以来最广泛使用的电影格式。CSS 数据类型 <ratio>
239/100变形“宽银幕”电影格式。 CSS 数据类型 <ratio>

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>调整浏览器窗口大小以查看效果。</h3>
      <p>此内容将根据宽高比具有不同的背景颜色。</p>
   </div>
</body>
</html>