CSS Data Type - <ratio>

CSS data type <ratio> is used for describing aspect ratios in media queries.

The proportion between two positive integers is represented by the <ratio> data type, which is defined as two numbers separated by a forward slash (/), with spaces permitted between the numbers and the slash.

  • The <ratio> data type in media queires consists of two positive <integer>s that indicate width and height, respectively, followed by a forward slash (/) and another positive <integer>. You can add spaces both before and after the slash.

  • The <ratio> data type also includes a positive <number>, a forward slash (/), and another positive <number>. One <number> is now also permitted as an acceptable value.

Syntax

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

Common aspect ratios

Following is the list of common aspect ratios:

Ratio Use Sample
4/3 The traditional television format of the 20th century.
16/9 The "widescreen" TV format of today.
185/100=91/50 the most widely used format for movies since the 1960s.
239/100 Anamorphic, "Widescreen," film format.

CSS <ratio> - Basic Example

The following example demonstrates the usage of CSS datatype <ratio> in media querry.

<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>
Advertisements