字典我要纠错

<resolution>

The <resolution> CSS data types, used in media queries, denotes the density of pixels of an output device, its resolution. It is a <number> immediately followed by a unit of resolution (dpi, dpcm, ---)- Like for any CSS dimension, there is no space between the unit literal and the number-

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

Even if all units represent the same resolution for the value 0, the unit may not be omitted in that case as it isn't a <length>: 0 is invalid and does not represent 0dpi, 0dpcm, nor 0dppx.

Units

dpi: This unit represents the number of dots per inch. A screen typically contains 72 or 96 dpi; a printed document usually reach much greater dpi. As 1 inch is 2.54 cm, 1dpi ≈ 0.39dpcm.
dpcm: This unit represents the number of dots per centimeter. As 1 inch is 2.54 cm, 1dpcm ≈ 2.54dpi.
dppx: This unit 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, that corresponds to the default resolution of images displayed in CSS as defined by image-resolution.

Examples

Here are some correct uses of <resolution> values:

96dpi                                              Correct use: a <number> (here an <integer>) followed by the unit.
@media print and (min-resolution: 300dpi) { ... }  Correct use in the context of a media query.

Here are some incorrect uses:

72 dpi                                             Incorrect: no spaces allowed between the <number> and the unit-
ten dpi                                            Incorrect: only digits must be used-
0                                                  Incorrect: the unit can be omitted for 0 values only for <length>.

Specifications

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	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	29	3.5 (1.9.1)^[1]	9	9.5	No support^[2]
`dppx`	29	16.0 (16.0)	?	12.10	?

Feature	Android	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.

<resolution>

<resolution>

Units

Examples

Specifications

Browser compatibility

See also