<resolution>
Quick Summary for resolution#dpi
The <resolution> CSS data type, used for describing resolutions in media queries, denotes the pixel density of an output device, i.e., its resolution.
Code Usage for resolution#dpi
@media print and (min-resolution: 300dpi) { ... } 
More Details for resolution#dpi

<resolution>

The <resolution> CSS data type, used for describing resolutions in media queries, denotes the pixel density of an output device, i.e., its resolution.

On screens, the units are related to CSS inches, centimeters, or pixels, not physical values.

Syntax

The <resolution> data type consists of a strictly positive <number> followed by one of the units listed below. As with all CSS dimensions, there is no space between the unit literal and the number.

Units

dpi

Represents the number of dots per inch. Screens typically contains 72 or 96 dots per inch, but the dpi for printed documents is usually much greater. As 1 inch is 2.54 cm, 1dpi ≈ 0.39dpcm.

dpcm

Represents the number of dots per centimeter. As 1 inch is 2.54 cm, 1dpcm ≈ 2.54dpi.

dppx

Represents the number of dots per px unit. Due to the 1:96 fixed ratio of CSS in to CSS px, 1dppx is equivalent to 96dpi, which corresponds to the default resolution of images displayed in CSS as defined by image-resolution.

x

Alias for dppx.

Note: Although the number 0 is always the same regardless of unit, the unit may not be omitted. In other words, 0 is invalid and does not represent 0dpi, 0dpcm, or 0dppx.

Examples

Use in a media query

@media print and (min-resolution: 300dpi) { ... } 

Valid resolutions

96dpi 50.82dpcm 3dppx 

Invalid resolutions

72 dpi     Spaces are not allowed between the number and the unit. ten dpi    The number must use digits only. 0          The unit is required. 

Specifications

Specification
CSS Values and Units Module Level 5 # resolution

See also

resolution media feature The image-resolution property Using @media queries

Last modified: Nov 21, 2021, by MDN contributors

Select your preferred language English (US)DeutschEspañolFrançais日本語中文 (简体) Change language

No Items Found.

Add Comment
Type in a Nick Name here
 
Other Categories in CSS
css
Search CSS
Search CSS by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

Subscribe
Subscribe to weekly update emails.
Random Quote
All of humanity's problems stem from man's inability to sit quietly in a room alone, wrote Blaise Pascal.
Unknown
Random CSS Property

repeating-radial-gradient()

The repeating-radial-gradient() CSS function creates an image consisting of repeating gradients that radiate from an origin. It is similar to radial-gradient() and takes the same arguments, but it repeats the color stops infinitely in all directions so as to cover its entire container, similar to repeating-linear-gradient(). The function's result is an object of the <gradient> data type, which is a special kind of <image>.
repeating-radial-gradient() css reference