CSS <resolution> Data Type
<resolution> data type is used with media queries to denote the density of pixels of an output device — its resolution.
<resolution> data type represents the size of a single "dot" in a graphical representation by indicating how many of these dots fit in a CSS
When you see
<resolution> (including the
>) anywhere in the CSS specifications, this refers to the fact that the value can be a valid resolution.
Resolution values are dimensions denoted by
<resolution>. A dimension is a
number immediately followed by a unit identifier, which is an identifier.
The unit identifiers for
- Dots per inch.
- Dots per centimeter.
- Dots per
Here's how CSS defines each of the lengths:
|cm||centimeters||1cm = 96px/2.54|
|in||inches||1in = 2.54cm = 96px|
|px||pixels||1px = 1/96th of 1in|
Here are some valid
As with all dimensions, there must be no space between the value and the unit identifier.
<resolution> data type is commonly used within media queries. Here's an example of a media query:
Media queries allow you to use different styles for different devices. In this example, we test against the device's resolution. If the device has a resolution of at least 300dpi, then the enclosed styles will apply to that device. If the device's resolution is lower than 300dpi, then it won't use those styles.
Here's another example. This time we test for a resolution of 2dppx:
Here's a working example where I display one of four background colors depending on the user's screen resolution:
I also use the
content property to generate a different message depending on the resolution.