Cómo HACER - Texto receptivo
Aprende a crear tipografía responsiva con CSS.
Hola Mundo
Cambie el tamaño de la ventana del navegador para ver cómo se escala el tamaño de fuente.
Tamaño de fuente sensible
El tamaño del texto se puede configurar con una vw
unidad, lo que significa el "ancho de la ventana gráfica".
De esa forma, el tamaño del texto seguirá el tamaño de la ventana del navegador:
Ejemplo
<h1 style="font-size:8vw;">Hello World</h1>
<p
style="font-size:2vw;">Resize the browser window to see how the font size
scales.</p>
Viewport es el tamaño de la ventana del navegador. 1vw = 1% del ancho de la ventana gráfica. Si la ventana gráfica tiene 50 cm de ancho, 1vw es 0,5 cm.
Cambiar el tamaño de fuente con consultas de medios
También puede usar consultas de medios para cambiar el tamaño de fuente de un elemento en tamaños de pantalla específicos:
Tamaño de fuente variable.
Ejemplo
/* If the screen size is 601px wide or
more, set the font-size of <div> to 80px */
@media screen and (min-width:
601px) {
div.example {
font-size: 80px;
}
}
/* If the screen size is 600px wide or less,
set the font-size of <div> to 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
Sugerencia: vaya a nuestro Tutorial de fuentes CSS para obtener más información sobre las fuentes.
Para obtener más información sobre consultas de medios, lea nuestro Tutorial de consultas de medios CSS .