Cómo usar descriptores de densidad

Katie Hempenius
Katie Hempenius
X

Explorar esta demostración

  • Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa pantalla completa
  • Vuelve a cargar la página usando distintos dispositivos para ver que el navegador cargue de otra forma. imágenes de contenedores.

Para ello, puedes usar el emulador del dispositivo. Si buscas una pantalla específica de red, estos son algunos dispositivos que puedes probar:

Densidad 1x Guía sobre Blackberry, muchos monitores externos
Densidad 2x iPad o iPhone 5/6
Densidad 3x Galaxy S5 o iPhone X
  • Revisa index.html para obtener el código que hace que esto funcione.

¿Cómo funciona?

El concepto de descriptores de densidad puede resultar desconocido para la mayoría de las personas. Para mejorar entenderlas, es útil tener un poco de información sobre cómo funciona el navegador con píxeles.

¿Qué son los píxeles?

Comencemos por definir qué es un píxel. Esto suena simple, pero "píxel" puede tener muchos significados:

Píxel del dispositivo (también conocido como "píxel físico")
Es el punto de color más pequeño que se puede mostrar en un dispositivo.
Píxel lógico
Información que especifica el color en una ubicación particular en una cuadrícula. Este tipo de píxel no tiene un tamaño físico inherente.
Píxel de CSS
Las especificaciones de CSS definen un píxel como una unidad de medida física. 1 píxel = 1/96 de pulgada.

Densidad de píxeles

Densidad de píxeles (también conocida como "densidad de pantalla" o "densidad de visualización") Mide la densidad de píxeles del dispositivo en un área física determinada. Este es que se mide comúnmente con píxeles por pulgada (ppi).

Durante muchos años, 96 ppp fue una densidad de visualización muy común (por eso, CSS definía una píxel como 1/96 de pulgada). A partir de la década de 1980, era la resolución predeterminada. de Windows. Además, era la resolución de CRT monitores.

Esto comenzó a cambiar cuando los monitores LED se volvieron comunes en la década de 2000. En particular, Apple tuvo un gran impacto en 2010 cuando introdujo las pantallas Retina. Estos pantallas tenían una resolución mínima de 192 ppp, que es el doble de la resolución “normal” (192 ppp/96 ppi = 2).

window.devicePixelRatio

Con la introducción de una tecnología de visualización más nueva, los "píxeles de dispositivo" comenzaron a variar en tamaño físico y forma y ya no tenían el mismo tamaño que "píxeles CSS". La necesidad de definir relación entre el tamaño de los “píxeles del dispositivo” y "píxeles CSS" es lo que llevó a la introducción de devicePixelRatio (a veces llamado "CSS Pixel relación").

devicePixelRatio define la relación entre los píxeles de dispositivo y los píxeles CSS. de un dispositivo en particular. Un dispositivo de 192 ppp tiene un devicePixelRatio de 2 (192 ppi/96 ppi = 2) porque "2 de sus píxeles de pantalla tienen el tamaño de 1 píxel de CSS".

Actualmente, la mayoría de los dispositivos tienen una proporción de píxeles de dispositivo de entre 1.0 y 4.0.

  • Para determinar la densidad de píxeles de un dispositivo, escribe window.devicePixelRatio en la consola.

  • Consulte esta tabla para conocer las proporciones de píxeles de dispositivos comunes. La mayoría se encuentran entre 1.0 y 4.0.

Entonces, ¿cómo se aplica esta información?

Ajusta el tamaño de las imágenes según la relación de píxeles de los dispositivos

Para que las imágenes se vean lo mejor posible en pantallas de alta resolución, es necesario a fin de proporcionar diferentes versiones de imagen para diferentes devicePixelRatios.

Proporción de píxeles del dispositivo Indica lo siguiente: En este dispositivo, una <img> etiqueta con un ancho de CSS de 250 píxeles, se verán mejor cuando la imagen de origen sea...
1 1 píxel de dispositivo = 1 píxel de CSS 250 píxeles de ancho
2 2 píxeles de dispositivo = 1 píxel de CSS 500 píxeles de ancho
3 3 píxeles de dispositivos = 1 píxel de CSS 750 píxeles de ancho

Información que debes tener en cuenta:

  • las dimensiones de píxeles que se muestran en editores de imágenes, directorios de archivos y y otros lugares son una medición de píxeles lógicos.
  • Para pantallas de mayor resolución y pantallas más grandes, necesitarás imágenes con dimensiones más grandes. El simple hecho de ampliar imágenes más pequeñas contradice el objetivo de y entregar varias versiones de imágenes. El navegador habría hecho esto de todas formas si no se proporcionó una imagen de alta resolución.

Usa descriptores de densidad para entregar varias imágenes de

los descriptores de densidad, junto con el prefijo "srcset " , se puede usar para para publicar diferentes imágenes en diferentes dispositivosPixelRatios.

  • Observa el archivo index.html y observa el elemento <img>.
<img src="flower.jpg"
  srcset="flower-1x.jpg 1x,
          flower-2x.jpg 2x,
          flower-3x.jpg 3x">

Este ejemplo se expresa en palabras:

  • 1x, 2x y 3x son descriptores de densidad que le indican al navegador la densidad de píxeles a la que está destinada una imagen. Esto guarda el navegador de descargar una imagen para determinar esta información.
  • El navegador puede elegir entre tres imágenes: flower-1x.jpg (ideal para navegadores con una densidad de píxeles de 1.0), flower-2x.jpg (destinado a con una densidad de píxeles de 2.0) y flower-3x.jpg (destinado a con una densidad de píxeles de 3.0).
  • flower.jpg es la imagen alternativa para los navegadores que no son compatibles. srcset

Cómo usarla:

  • Usa devicePixelRatio y la unidad x para escribir descriptores de densidad. Para Por ejemplo, el descriptor de densidad para muchas pantallas Retina (window.devicePixelRatio = 2) se escribiría como 2x.
  • Si no se proporciona un descriptor de densidad, se supone que es 1x.
  • Incluir descriptores de densidad en los nombres de archivo es una convención común (y ayudarte a realizar un seguimiento de los archivos), pero no es necesario. Las imágenes pueden tener cualquiera nombre de archivo.
  • No es necesario incluir un atributo sizes. El atributo sizes solo es que se usa con descriptores de ancho.