CSS Media Features - max-device-aspect-ratio

Quiz

CSS media feature max-device-aspect-ratio specifies the maximum 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 (max-device-aspect-ratio: 16/9) {
   /* Styles for devices */
}

CSS max-device-aspect-ratio - ratio Value

The following example demonstrates that the use of media feature max-device-aspect-ratio to change the background color and border of an element on devices with an aspect ratio of 16:9 or less −

<html>
<head>
<style>
   .box {
      background-color: pink;
      text-align: center;
      line-height: 100px;
   }
   @media (max-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 max-device-aspect-ratio
   </div>
</body>
</html>

Print Page