Tamaño de fuente dependiente de la resolución del viewport

Los textos con etiqueta h1, títulos, tienen el doble de tamaño de letra que los párrafos comunes.

El ejercicio tiene definido un tamaño de letra default y luego todo se expresa en unidades de referencia (em).

Se está usando el control de medio @media() para modificar el tamaño de letra según el tamaño del viewport.

La resolución de pantalla se mide en pixeles de ancho x pixeles de alto.

Generalmente, los dispositivos de tamaño pequeño tienen mayor definición: 500ppi (píxeles por pulgada) en celulares modernos.

A su vez, los dispositivos de pantalla grande tienen menor definición: alrededor de 100ppi.

Por eso, los rangos de resolución son similares tanto en pantallas grandes como pequeñas.

Si una pantalla tiene alta resolución en píxeles, las letras pueden tener dimensiones grandes.

Entonces, si no se usa el control de medio, conviene definir el tamaño de letra considerando el peor caso (dispositivos de baja resolución).

En este ejercicio, la letra se agranda según crece la resolución del dispositivo:

12px (1em ya que es el tamaño default) para dispositivos de baja resolución.

24px (2em) para dispositivos de media resolución, de 800-1080px.

36px (3em) para dispositivos de alta resolución.