Cómo crear: texto responsivo
- Página anterior Lista sin viñetas
- Página siguiente Texto en sombra
Aprende a usar CSS para crear diseño responsive.
Hola Mundo
Ajuste el tamaño de la ventana del navegador para ver cómo cambia el tamaño de la fuente.
Tamaño de fuente responsivo
El tamaño del texto se puede vw
Configuración de unidades, lo que significa "ancho de la vista".
De esta manera, el tamaño del texto seguirá el tamaño de la ventana del navegador:
<h1 style="font-size:8vw;">Hola Mundo</h1> <p style="font-size:2vw;">Ajuste el tamaño de la ventana del navegador para ver cómo cambia el tamaño de la fuente.</p>
Notas:La vista es el tamaño de la ventana del navegador.1vw
= 1% del ancho de la vista. Si el ancho de la vista es de 50 cm, entonces 1vw
de 0.5 cm.
Cambiar el tamaño de la fuente con consultas de medios
También puede usar consultas de medios para cambiar el tamaño de la fuente de los elementos en un tamaño de pantalla específico:
Tamaño de fuente variable.
/* Si el ancho de la pantalla es 601px o mayor, configure el font-size del <div> en 80px */ @media screen and (min-width: 601px) { div.example { font-size: 80px; } } /* Si el ancho de la pantalla es 600px o menor, configure el font-size del <div> en 30px */ @media screen and (max-width: 600px) { div.example { font-size: 30px; } }
Páginas relacionadas
Tutoriales:Fuente CSS
Tutoriales:Consulta de medios CSS
- Página anterior Lista sin viñetas
- Página siguiente Texto en sombra