<resolution>
Baseline 2022
Newly available
Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
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>
.
Especificaciones
Specification |
---|
CSS Values and Units Module Level 4 # resolution |
Compatibilidad con navegadores
BCD tables only load in the browser