Cómo crear: texto responsivo

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.

Ver el efecto

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>

Prueba por tu cuenta

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.

Ver el efecto

/* 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;
  }
}

Prueba por tu cuenta

Páginas relacionadas

Tutoriales:Fuente CSS

Tutoriales:Consulta de medios CSS