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!

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!

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!