Por si la explicación en el vídeo no quedó del todo clara, voy a intentar explicar lo que es el Device Pixel Ratio de la forma más simple posible:
Para empezar, existen 2 tipos de píxeles:
Píxeles físicos: son los píxeles reales que están en un monitor, smartphone, tv, etc. Por ejemplo, cuando se habla de 1920x1080 (Full HD), se refiere siempre a una pantalla de 1920 píxeles FÍSICOS de ancho y 1080 FÍSICOS de alto.
Píxeles CSS (o del viewport): es la unidad de medida con la que trabaja CSS para pintar elementos en el viewport, y NO siempre son del mismo tamaño que un píxel físico.
Ahora bien, ¿Qué es el Device Pixel Ratio (DPR)?: el DPR es el ratio entre los píxeles físicos y los píxeles CSS. Veamos algunos ejemplos para que sea más fácil de entender:
Si mi DPR es de 1, el tamaño de 1 píxel CSS será de 1 píxel físico, por lo que ambos abarcarán el mismo espacio en pantalla.
Si mi DPR es de 2, el tamaño de 1 píxel CSS será de 4 píxeles físicos (2 píxeles físicos de ancho x 2 píxeles físicos de alto).
Si mi DPR es de 3, el tamaño de 1 píxel CSS será de 9 píxeles físicos (3 píxeles físicos de ancho x 3 píxeles físicos de alto).
El valor del DPR también puede ser decimal, como 2,5 o 2,75.
Sabiendo lo anterior, hay que tener en cuenta que cuando manejamos medidas
en HTML y CSS estamos hablando SIEMPRE de píxeles CSS (o del viewport) y NUNCA de píxeles físicos.
Entonces, si tenemos por ejemplo un DPR de 1 e insertamos una imagen de 300x300 píxeles CSS en el navegador (como podría ser con
<img src="Goku.jpg" width="300" height="300">
, esta imagen terminará ocupando 300x300 píxeles físicos. A su vez, si tenemos un DPR de 3 e insertamos una imagen de 300x300 píxeles CSS en el navegador, esta imagen terminará ocupando 900x900 píxeles físicos, o sea, 3 veces más píxeles que los que definimos por código.
Como dato a tener en cuenta, la mayoría de los smartphones modernos tienen un DPR de 2,75 o 3, ya que si tuviesen un DPR de 1 todos los elementos se verían muy pequeños en sus pantallas Full HD de sólo 5" o 5.5". Por otra parte, en pc el DPR por defecto es de 1, pero si hacemos zoom en el navegador el DPR aumentará a la par (con un zoom de 150% el DPR será de 1,5, con un zoom de 200% el DPR será de 2, y así). De hecho, pueden probar esto muy fácilmente en: https://www.mydevice.io/.
Para leer un poco más sobre el tema: https://tomroth.com.au/dpr/.
Espero que les sirva.
¡Saludos!
Soy nuevo por acá , pero he terminado el curso de La ruta del desarrollador web y realize una infografía sobre como funciona la web , según lo que entendí en el curso , y nada se los quise compartir .