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>

列印頁面