CSS 数据类型 <ratio> 用于描述媒体查询中的纵横比。
两个正整数之间的比例由数据类型 <ratio> 表示，该数据类型定义为两个数字，用正斜杠 （/） 分隔，数字和斜杠之间允许有空格。
- 数据类型 <ratio> 由两个正 <integer> 组成，分别表示宽度和高度，后跟一个正斜杠 （/） 和另一个正 <integer>。您可以在斜杠前后添加空格。
- <ratio> 数据类型还包括一个正 <integer> 、一个正斜杠 （/） 和另一个正 <integer> 。现在也允许将一个 <integer> 作为可接受的值。
语法
<ratio> = <number [0,∞]> [ / <number [0,∞]> ]?
常见纵横比
以下是常见纵横比的列表：
| Ratio | Use | Sample |
|---|---|---|
| 4/3 | 20 世纪的传统电视格式。 |  |
| 16/9 | 今天的“宽屏”电视格式。 |  |
| 185/100=91/50 | 自 1960 年代以来使用最广泛的电影格式。 |  |
| 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>
