CSS Media Features - min-device-aspect-ratio

Quiz

CSS media feature min-device-aspect-ratio defines the minimum aspect ratio of the device's viewport. The viewport is the area of the device's screen that is used to display the web page.

Possible Values

ratio − This is the desired ratio of the width to the height in the form of a fractional value or a single integer.

Syntax

@media (min-device-aspect-ratio: 16/9) {
   /* Styles for devices */
}

CSS min-device-aspect-ratio - ratio Value

The following example demonstrates how to use the CSS media feature min-device-aspect-ratio to change the background color and border of a element if the device's aspect ratio is at least 16:9 −

<html>
<head>
<style>
   .box {
      background-color: pink;
      text-align: center;
      line-height: 100px;
   }
   @media (min-device-aspect-ratio: 16/9) {
      .box {
         background-color: yellow;
         border: 3px solid blue;
      }
   }
</style>
</head>
<body>
   <h3>Resize the browser window to see the effect.</h3>
   <div class="box">
      CSS Media Feature min-device-aspect-ratio
   </div>
</body>
</html>

Print Page