Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

Resumen

El tipo de dato CSS <resolution>, usado en media queries,  define la densidad de píxeles de un dispositivo de salida, su resolución. Es un <number> inmediatamente seguido por una unidad de resolución (dpi, dpcm, ...). Como para cualquier dimensión CSS, no hay espacio entre la unidad literal y el número.

En pantallas, la longitud está relacionada a centímetros, pulgadas o píxeles CSS, no en valores físicos.

Incluso si todas las unidades representan la misma resolución para el valor 0, la unidad no se puede omitir en este caso, ya que no es un <length>: 0 es inválida y no representa 0dpi, 0dpcm, ni 0dppx.

Unidades

dpi
Esta unidad representa el número de dots per inch (ppp en español), puntos por pulgada . 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
Esta unidad representa el número de  dots per centimeter (ppc en español), puntos por cm. 1 inch(pulgada) son 2.54 cm, 1dpcm ≈ 2.54dpi.
dppx
Esta unidad representa el número de puntos por unidad px. Debido a la relación fija de 1:96 CSS para CSS px, 1 px es equivalente a 96 dpi, que corresponde a la resolución predeterminada de las imágenes mostradas en CSS como se define por image-resolution.

Ejemplos

Éstos son algunos de los usos correctos de valores <resolution>:

96dpi                                              Uso correcto: a <number> (here an <integer>) followed by the unit.
@media print and (min-resolution: 300dpi) { ... }  El uso correcto en el contexto de una media query.

Here are some incorrect uses:

72 dpi                                             Incorecto: no hay espacios entre <number> y la unidad.
ten dpi                                            Incorecto: sólo deben ser utilizados dígitos.
0                                                  Incorecto: la unidad se puede omitir por 0 sólo para valores <length>.

Especificación

Especificación Estado Comentario
CSS Values and Units Module Level 3
La definición de '<resolution>' en esta especificación.
Candidate Recommendation Factorización del tipo en una especificación más genérica. Ningún cambio
CSS Images Module Level 3
La definición de '<resolution>' en esta especificación.
Candidate Recommendation Añadida la unidad dppx
Media Queries
La definición de '<resolution>' en esta especificación.
Recommendation Definición inicial

Compatibilidad de navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Soporte básico 29 3.5 (1.9.1)[1] 9 9.5 Sin soporte[2]
dppx 29 16.0 (16.0) ? 12.10 ?
Característica Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Soporte básico Sin soporte[2] (Yes) ? (Yes) Sin soporte[2]
dppx ? 16.0 (16.0) ? 12.10 ?

[1] Antes de Firefox 8 (Gecko 8.0), era erroneamente aceptado sólo dimensiones CSS que fueran <integer> seguidos por la unidad. A partir de esa versión, es compatible con cualquier dimensión (<number> CSS válido seguido inmediatamente por la unidad).

[2] El Webkit engine no soporta resolución CSS  en la especificación, es necesario el uso del no estandar device-pixel-ratio query para el navegador Safari, ver bug 16832.

Ver también

Etiquetas y colaboradores del documento

Colaboradores en esta página: Sebastianz, Prinz_Rana, Conradin88
Última actualización por: Sebastianz,