CSS 数据类型 - ratio

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>

打印本页