Tamaño de fuente 16px
- Utilizar unidades de viewport para elementos grandes es ventajoso, ya que crea páginas responsivas sin necesidad de @media
- Sin embargo, es complicado poner tamaños pequeños en términos de viewport
- ¿Podremos poner los tamaños pequeños en términos del tamaño de la fuente?
Tamaño de fuente 2REM (32px)
Unidades REM
- Son relativas al tamaño de la fuente del documento (html)
- Por tanto, pueden variar si se anidan varios tamaños de fuente
Tamaño de fuente 2em (32px)
Contenido :Texto interno a h1. Tamaño 1.5rem (24 px)
Se puede observar que al cambiar la fuente del elemento padre, las demás cambian de forma consecuente
No obstante, el factor multiplicativo puede hacer que la fuente crezca o se reduzca muchísimo.
Ahora, lo que queda es que la fuente cambie responsivamente con el tamaño de viewport
- html{font-size: 16px;}. Utiliza un tamaño de fuente constante en la raíz
- html{font-size: calc(1vw + 1vh + .5vmin);}. Calcula el tamaño de fuente en función del tamaño del viewport