En CSS se pueden utilizar diferentes unidades para indicar el tamaño de una fuente, una de ellas es vw
que es una unidad relativa al ancho de la ventana (viewport). Según la página de MDN:
Longitudes Viewport-porcentaje
vh
1/100 de la altura de la vista (viewport).
vw
1/100 del ancho de la vista (viewport).
Teniendo eso en cuenta, pensé en poner una cadena de 100 caracteres (123456789_ repetido 10 veces) con tamaño 1vw
y, al menos en teoría, debería ocupar un 100% de la vista... pero no es el caso y la cadena se queda como a mitad de la ventana:
* {
margin:0;
padding:0;
border:0;
font-size:1vw;
}
<div>123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_</div>
Ahora, si en lugar de poner 1vw
, indico que la fuente debe ser 2vw
, el texto sí ocupa el ancho completo de la ventana (hay que pulsar en el botón de Página Completa para ver el efecto, parece que el iframe no le gusta):
* {
margin:0;
padding:0;
border:0;
font-size:2vw;
}
<div>123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_123456789_</div>
Si mi cadena tiene 100 caracteres y le pongo un ancho de letra de 1% del ancho de la ventana (1vw
) la cadena debería ocupar el 100% de la ventana, pero en lugar de eso, ocupa un 50% y debo poner un tamaño de 2vw
(que entonces ocuparía 200%) para que se vea bien. ¿Por qué ocurre esto?
He comprobado que este comportamiento es consistente entre navegadores (ocurre lo mismo en Chrome, Firefox e IE) y en diferentes herramientas (JSFiddle, CodePen), así que debe ser algo que yo no estoy haciendo bien o que estoy pasando por alto.
También he notado que vw
sólo funciona si la cadena mantiene la fuente por defecto del navegador (Times New Roman) y si esa fuente se cambia a otra (por ejemplo Arial, Verdana o Courier), entonces también falla (tanto con 1vw
como 2vw
).