CSS Media Features - Resolution

CSS resolution media feature check how many pixels are displayed per inch on a screen.

This feature allows you to specify a range of screen resolutions. You can use min-resolution to match devices with a resolution greater than or equal to a certain value, and max-resolution to match devices with a resolution less than or equal to a certain value.

Resolution takes a number with either a dpi (dots per inch), dpcm (dots per centimeter) or dppx (dots per pixel). In CSS, a pixel is always 96dpi, so 1dppx is a regular screen resolution, and 2dppx is 'retina'.

Possible Values

  • <integer> − A positive integer value, representing the number of dpi of the output device.

Syntax

resolution: <integer>

CSS resolution - <interge> Value

The following example demonstrates how to use the CSS resolution media feature to change the background color of a div element to red when the output device has a resolution of 96dpi −

<html>
<head>
<style>
   @media (resolution: 96dpi) {
      div {
         background-color: red;
      }
   }
</style>
</head>
<body>
   <div>CSS Media feature resolution.</div>
</body>
</html>

CSS resolution - min-resolution Property

The following example demonstrates that min-resolution media feature, changes the background color of a div element to red when the output device has a resolution of 80dpi or higher −

<html>
<head>
<style>
   @media (min-resolution: 80dpi) {
      div {
         background-color: red;
      }
   }
</style>
</head>
<body>
   <div>CSS Media feature min-resolution.</div>
</body>
</html>

CSS resolution - max-resolution Property

The following example demonstrates that max-resolution media feature changes the background color of a div element to pink when the output device has a resolution of 300dpi or less −

<html>
<head>
<style>
   @media (max-resolution: 300dpi) {
      div {
         background-color: pink;
      }
   }
</style>
</head>
<body>
   <div>CSS Media feature max-resolution.</div>
</body>
</html>
Advertisements