Pero, ¿qué pasa si el contenedor no es la ventana gráfica (cuerpo)?
Esta pregunta se hace en un comentario de Alex bajo la respuesta aceptada .
Ese hecho no significa vwque no se pueda utilizar hasta cierto punto para dimensionar ese contenedor. Ahora, para ver cualquier variación, uno debe asumir que el contenedor de alguna manera es flexible en tamaño. Ya sea a través de un porcentaje directo widtho por ser 100% menos márgenes. El punto se convierte en "discutible" si el contenedor siempre se establece en, digamos, 200pxancho, luego simplemente configure un font-sizeque funcione para ese ancho.
Ejemplo 1
Sin embargo, con un contenedor de ancho flexible, debe tenerse en cuenta que de alguna manera el contenedor todavía se está dimensionando fuera de la ventana gráfica . Como tal, se trata de ajustar una vwconfiguración basada en esa diferencia de tamaño porcentual a la ventana gráfica, lo que significa tener en cuenta el tamaño de los contenedores primarios. Toma este ejemplo :
div {
width: 50%;
border: 1px solid black;
margin: 20px;
font-size: 16px;
/* 100 = viewport width, as 1vw = 1/100th of that
So if the container is 50% of viewport (as here)
then factor that into how you want it to size.
Let's say you like 5vw if it were the whole width,
then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
*/
font-size: 2.5vw;
}
Suponiendo que aquí dives un hijo del body, es 50%de ese 100%ancho, que es el tamaño de la ventana gráfica en este caso básico. Básicamente, desea establecer un vwque se vea bien para usted. Como puede ver en mi comentario en el contenido CSS anterior, puede "pensar" matemáticamente con respecto al tamaño completo de la ventana gráfica, pero no es necesario que lo haga. El texto se va a "flexionar" con el contenedor porque el contenedor se está flexionando con el tamaño de la ventana gráfica. ACTUALIZACIÓN: aquí hay un ejemplo de dos contenedores de diferentes tamaños .
Ejemplo 2
Puede ayudar a garantizar el tamaño de la vista forzando el cálculo basado en eso. Considere este ejemplo :
html {width: 100%;} /* Force 'html' to be viewport width */
body {width: 150%; } /* Overflow the body */
div {
width: 50%;
border: 1px solid black;
margin: 20px;
font-size: 16px;
/* 100 = viewport width, as 1vw = 1/100th of that
Here, the body is 150% of viewport, but the container is 50%
of viewport, so both parents factor into how you want it to size.
Let's say you like 5vw if it were the whole width,
then for this container, size it at 3.75vw
(5 * 1.5 [i.e. 150%]) * .5 [i.e. 50%]
*/
font-size: 3.75vw;
}
El tamaño todavía se basa en la vista, pero en esencia se configura en función del tamaño del contenedor.
El tamaño del contenedor debería cambiar dinámicamente ...
Si el tamaño del elemento contenedor terminó cambiando dinámicamente su relación porcentual, ya sea a través de @mediapuntos de interrupción o mediante JavaScript, entonces cualquiera que sea el "objetivo" base necesitaría un nuevo cálculo para mantener la misma "relación" para el tamaño del texto.
Tome el ejemplo # 1 arriba. Si divse cambió al 25%ancho por cualquiera de ellos @mediao por JavaScript, al mismo tiempo, font-sizesería necesario ajustar en la consulta de medios o por JavaScript al nuevo cálculo de 5vw * .25 = 1.25. Esto pondría el tamaño del texto al mismo tamaño que hubiera tenido si el "ancho" del 50%contenedor original se hubiera reducido a la mitad del tamaño de la ventana gráfica, pero ahora se ha reducido debido a un cambio en su propio cálculo de porcentaje.
Un reto
Con la calc()función CSS3 en uso, sería difícil de ajustar dinámicamente, ya que esa función no funciona para font-sizefines en este momento. Por lo tanto, no podría hacer un ajuste CSS 3 puro si su ancho está cambiando calc(). Por supuesto, un pequeño ajuste de ancho para los márgenes puede no ser suficiente para garantizar cualquier cambio font-size, por lo que puede no importar.
font-size: 100%;significa el 100% del tamaño que tendría el texto (es decir, el que hereda de su padre). Por defecto eso es 16px. Entonces, si usó 50%, sería el tamaño de fuente: 8px