7.1 Principios Básicos
Fuentes responsivas juegan un papel importante en la creación de un diseño web adaptable. Usar unidades relativas como
vw, vh, vmin, y vmax, permite que las fuentes cambien dinámicamente según el tamaño
del viewport, asegurando una óptima visualización del texto en diversos dispositivos. Vamos a detallar cómo funcionan estas unidades
y cómo usarlas para crear fuentes responsivas.
Conceptos principales
vw y vh:
vw(viewport width): 1 unidad devwequivale al 1% de la anchura del viewportvh(viewport height): 1 unidad devhequivale al 1% de la altura del viewport
vmin y vmax:
vmin(viewport minimum): 1 unidad devminequivale al 1% de la menor dimensión del viewport (ya sea anchura o altura)vmax(viewport maximum): 1 unidad devmaxequivale al 1% de la mayor dimensión del viewport (ya sea anchura o altura)
Ventajas de las fuentes responsivas:
- Mejora de la legibilidad: el tamaño de la fuente se ajusta automáticamente al tamaño de la pantalla, asegurando una cómoda lectura en cualquier dispositivo
- Flexibilidad del diseño: las fuentes responsivas ayudan a mantener un diseño armonioso y equilibrado al cambiar el tamaño del viewport
- Enfoque unificado: usar unidades relativas para fuentes permite mantener un enfoque unificado en la creación de un diseño adaptable
7.2 Ejemplos de uso de vw y vh
Ejemplo 1: Tamaño básico de fuente usando vw
Hagamos un ejemplo donde el tamaño de la fuente cambia según la anchura del viewport:
body {
font-size: 2vw; /* El tamaño de la fuente equivale al 2% de la anchura del viewport */
}
h1 {
font-size: 4vw; /* El tamaño de la fuente del encabezado equivale al 4% de la anchura del viewport */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fuente responsiva usando vw</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Encabezado responsivo</h1>
<p>Este texto cambia de tamaño según la anchura del viewport.</p>
</body>
</html>
Explicación del código:
body { font-size: 2vw; }: establece el tamaño de fuente para el texto dentro debody, equivalente al 2% de la anchura del viewporth1 { font-size: 4vw; }: establece el tamaño de fuente para el encabezadoh1, equivalente al 4% de la anchura del viewport
Ejemplo 2: Tamaño básico de fuente usando vh
Ahora haremos un ejemplo donde el tamaño de la fuente cambia según la altura del viewport:
body {
font-size: 2vh; /* El tamaño de la fuente equivale al 2% de la altura del viewport */
}
h1 {
font-size: 4vh; /* El tamaño de la fuente del encabezado equivale al 4% de la altura del viewport */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fuente responsiva usando vh</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Encabezado responsivo</h1>
<p>Este texto cambia de tamaño según la altura del viewport.</p>
</body>
</html>
Explicación del código:
body { font-size: 2vh; }: establece el tamaño de la fuente para el texto dentro debody, equivalente al 2% de la altura del viewporth1 { font-size: 4vh; }: establece el tamaño de la fuente para el encabezadoh1, equivalente al 4% de la altura del viewport
7.3 Ejemplos de uso de vmin y vmax
Ejemplo 1: Tamaño básico de fuente usando vmin
Hagamos un ejemplo donde el tamaño de la fuente cambia según la menor dimensión del viewport:
body {
font-size: 2vmin; /* El tamaño de la fuente equivale al 2% de la menor dimensión del viewport */
}
h1 {
font-size: 4vmin; /* El tamaño de la fuente del encabezado equivale al 4% de la menor dimensión del viewport */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fuente responsiva usando vmin</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Encabezado responsivo</h1>
<p>Este texto cambia de tamaño según la menor dimensión del viewport.</p>
</body>
</html>
Explicación del código:
body { font-size: 2vmin; }: establece el tamaño de fuente para el texto dentro debody, equivalente al 2% de la menor dimensión del viewporth1 { font-size: 4vmin; }: establece el tamaño de la fuente para el encabezadoh1, equivalente al 4% de la menor dimensión del viewport
Ejemplo 2: Tamaño básico de fuente usando vmax
Hagamos un ejemplo donde el tamaño de la fuente cambia según la mayor dimensión del viewport:
body {
font-size: 2vmax; /* El tamaño de la fuente equivale al 2% de la mayor dimensión del viewport */
}
h1 {
font-size: 4vmax; /* El tamaño de la fuente del encabezado equivale al 4% de la mayor dimensión del viewport */
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fuente responsiva usando vmax</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Encabezado responsivo</h1>
<p>Este texto cambia de tamaño según la mayor dimensión del viewport.</p>
</body>
</html>
Explicación del código:
body { font-size: 2vmax; }: establece el tamaño de fuente para el texto dentro debody, equivalente al 2% de la mayor dimensión del viewporth1 { font-size: 4vmax; }: establece el tamaño de fuente para el encabezadoh1, equivalente al 4% de la mayor dimensión del viewport
GO TO FULL VERSION