MDN will be in maintenance mode on Thursday September 21st, starting at 10 AM Pacific / 5 PM UTC, for about 1 hour.

Relawan kami belum menerjemahkan artikel ini ke dalam Bahasa Indonesia. Bergabunglah dan bantu kami menyelesaikan pekerjaan ini!
Anda juga bisa membaca artikel dalam English (US).

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

On screens, the length is related to CSS inches, centimeters, or pixels, not on physical values.


The <resolution> data type consists of a <number> immediately followed by a unit of resolution (dpi, dpcm, ...). As with all dimensions, there is no space between the unit literal and the number.

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.


Represents the number of dots per inch. A screen typically contains 72 or 96 dpi, but a printed document usually has much greater dpi. As 1 inch is 2.54 cm, 1dpi ≈ 0.39dpcm.
Represents the number of dots per centimeter. As 1 inch is 2.54 cm, 1dpcm ≈ 2.54dpi.
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.


Valid examples


@media print and (min-resolution: 300dpi) { ... }    Correct use in a media query

Invalid examples

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.


Specification Status Comment
CSS Values and Units Module Level 3
The definition of '<resolution>' in that specification.
Candidate Recommendation Factorization of the type in a more generic specification. No change
CSS Image Values and Replaced Content Module Level 3
The definition of '<resolution>' in that specification.
Candidate Recommendation Added the dppx unit
Media Queries
The definition of '<resolution>' in that specification.
Recommendation Initial definition

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support 29 20 (12.10240) 3.5 (1.9.1)[1] 9 9.5 No support[2]
dppx 29 20 (12.10240) 16.0 (16.0) No support 12.10 No support
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support No support[2] ? (Yes) ? (Yes) No support[2]
dppx ? ? 16.0 (16.0) ? 12.10 ?

[1] Before Firefox 8 (Gecko 8.0), it erroneously accepted only CSS dimensions that were <integer> followed by the unit. From that version, it supports any valid CSS dimensions (<number> immediately followed by the unit).

[2] Webkit engine does not support CSS resolution query as in the specification, the use of the non-standard device-pixel-ratio query is needed for browsers Safari, see bug 16832.

See also

Tag Dokumen dan Kontributor

 Terakhir diperbarui oleh: zbjornson,