Nossos voluntários ainda não traduziram este artigo para o Português (do Brasil). Junte-se a nós e ajude-nos a fazer o trabalho!
Você também pode ler o artigo em English (US).

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 Status Comment
CSS Values and Units Module Level 4
The definition of '<resolution>' in that specification.
Editor's Draft Adds the x unit.
CSS Values and Units Module Level 3
The definition of '<resolution>' in that specification.
Candidate Recommendation Adds the dppx unit.
Media Queries
The definition of '<resolution>' in that specification.
Recommendation Initial definition.

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 29Edge Full support 12Firefox Full support 3.5IE Full support 9Opera Full support 9.5Safari Full support YesWebView Android No support NoChrome Android ? Edge Mobile Full support 12Firefox Android Full support YesOpera Android Full support YesSafari iOS Full support YesSamsung Internet Android ?
dppx unitsChrome Full support 29Edge Full support 12Firefox Full support 16IE No support NoOpera Full support 12.1Safari Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: device-pixel-ratio
No support No
Notes
Notes See bug 16832.
WebView Android ? Chrome Android ? Edge Mobile Full support 12Firefox Android Full support 16Opera Android Full support 12.1Safari iOS Full support Yes
Alternate Name
Full support Yes
Alternate Name
Alternate Name Uses the non-standard name: device-pixel-ratio
No support No
Notes
Notes See bug 16832.
Samsung Internet Android ?
x unitsChrome ? Edge ? Firefox Full support 62IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android Full support 62Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
Uses a non-standard name.
Uses a non-standard name.

See also

Etiquetas do documento e colaboradores

Última atualização por: ExE-Boss,