Artículo original escrito por Joy Shaheb
Artículo original Learn CSS Units – Em, Rem, VH, and VW with Code Examples ✨✨
Traducido y adaptado por Julio Vargas
Hoy vamos a aprender como usar las unidades CSS EM, REM, VW y VH a través de ejemplos prácticos, también veremos como hacer sitios web responsivos con esas unidades.
Comencemos.
Tabla de contenidos
- ¿Por qué aprender unidades relativas de CSS?
- ¿Qué son las unidades REM?
- Como hacer sitios web responsivos con unidades REM
- ¿Qué son las unidades EM?
- ¿Qué son las unidades VW?
- ¿Qué son las unidades VH?
- Recursos Adicionales
También puedes ver este tutorial en YouTube si quieres (en inglés).
¿Por qué aprender unidades relativas de CSS?
Si tú quieres hacer sitios web responsivos muy fácilmente, rápido y eficientemente, entonces definitivamente deberías aprender unidades relativas de CSS.
REM, EM, VW, VH son unidades relativas, si las combinas con consultas de medios construirás diseños perfectamente escalables. Mira este GIF ? el texto es responsivo en escritorio, tableta y pantallas móviles.
Recuerda que los pixeles son unidades absolutas, no cambiarán cuando modifiques el tamaño de tu ventana. Mira este GIF ? observa que el tamaño de la fuente de 50px no cambia cuando se modifica la ventana.
Consejo: Antes de comenzar el tutorial, te sugiero que no pienses en EM o REM como unidades, sino más bien como multiplicadores de un número base.
Configuración del proyecto.
Primero, copia el código de este link de Code Pen y pégalo en VS Code o en tu editor de código de preferencia, luego sigue estos pasos.
- Crea una carpeta llamada proyecto-1.
- Crea los archivos HTML, CSS y JS y vincúlalos.
- Instala los plugins que necesitamos - px to rem y Live Server
- Ejecuta Live Server
Como puedes ver en el gif ? JavaScript está haciendo los cálculos así que nos enfocaremos en el tutorial. Solo cambiaremos el CSS y experimentaremos con diferentes valores.
¡Empecemos a codificar!
¿Qué son las unidades Rem?
La unidad REM depende del elemento raíz (El elemento HTML). Mira una imagen que muestra como funciona.?
El tamaño por defecto de la fuente del elemento raíz (en HTML) es de 16px. Entonces 1 REM = 16px
Pero si cambiamos el tamaño de fuente del elemento raíz, la unidad REM cambia, así ?
Estamos configurando el tamaño de fuente de HTML en 50px.
Ahora, si escribimos 3 rem, nos mostrará 3*50px = 150px así ?
Recreemos los resultados con código y veamos sus casos de uso en la práctica.?
Primero experimentemos con el tamaño por defecto de fuente de todo sitio web, el cual es 16 pixeles y configuraremos la clase .texto con un tamaño de fuente de 1 rem.
html {
font-size: 16px;
}
.texto {
font-size: 1rem;
}
/** Cálculos
1 rem * 16px = 16px
**/El resultado sería el siguiente. ?
Ahora incrementemos el tamaño de fuente de .texto a 2 rem:
html {
font-size: 16px;
}
.texto {
font-size: 2rem;
}
/** Cálculos
2 rem * 16px = 32px
**/Así se vería el resultado.?
Como puedes ver, el tamaño de fuente se hace más grande, pero el ancho continúa igual (1536px).
Como cambiar el tamaño de fuente de la raíz.
Ahora experimentemos cambiando el tamaño de fuente de la raíz, el cual, está dentro de HTML. Primero escribe este código para obtener el resultado por defecto. ?
html {
font-size: 16px;
}
.texto {
font-size: 1rem;
}
/** Cálculos
1 rem * 16px = 16px
**/Se vería así. ?
Ahora cambiemos el tamaño de fuente de la raíz a 40px.
html {
font-size: 40px;
}
.texto {
font-size: 1rem;
}
/** Cálculos
1 rem * 40px = 40px
**/Mira el resultado. ?
Ahora cambiemos el tamaño de fuente de .texto a 2 rem. ?
html {
font-size: 40px;
}
.texto {
font-size: 2rem;
}
/** Cálculos
2 rem * 40px = 80px
**/Y el resultado sería el siguiente.?
Como cambiamos el tamaño de fuente de la raíz a 40px cuando cambiamos el tamaño de texto de .texto a 2 rem, obtenemos: 2*40 = 80px.
Como hacer sitios web responsivos con unidades REM
Hacer sitios web responsivos con REM es muy fácil. Solamente escribe tus estilos en unidades rem en vez de pixeles y cambia elementos raíz en diferentes breakpoints usando consultas de medios.
Te dejo una demostración para que veas como se hace y como agregar consultas de medios.?
// Pantallas grandes
@media (max-width: 1400px) {
html {
font-size: 25px;
}
}
// Tabletas
@media (max-width: 768px) {
html {
font-size: 18px;
}
}
// Celulares
@media (max-width: 450px) {
html {
font-size: 12px;
}
}Ahora configura la clase .texto a 3 rem, así.?
.texto{
font-size : 3rem;
}Resultado.?
Mira los cálculos
- Pantallas grandes -> 3 rem * 25px = 75px
- Tabletas -> 3 rem * 18px = 54px
- Celulares -> 3 rem * 12px = 36px
- Por defecto -> 3rem * 16px = 48px
¿Qué son las unidades EM?
EM es lo mismo que REM, pero depende del tamaño de fuente del padre. Así.? Nota: asegúrate de remover todas las consultas de medios.
html {
font-size: 16px;
}
.texto {
font-size: 3em;
}
/** Cálculos
font-size should be
3 em * 16px = 48px
**/Resultado.?
Ahora intentemos agregar 3 em de padding a la clase .texto.
html {
font-size: 16px;
}
.texto {
font-size: 3em;
padding: 3em;
}
/** Cálculos
text => 3em * 16px = 48px
padding => 3em * 3em * 16px = 144px
**/En vez de tener 48px de relleno, obtenemos 144px de relleno. Como puedes ver, es multiplicado por los números previos.
Aquí está la parte calculada de la consola del desarrollador: ?
No uses EM .?❌
Usar EM no vale el esfuerzo porque:
- Tienes un alto probabilidad de cometer error de cálculo.
- Tienes que escribir un montón de código en las consultas de medios mientras intentas hacer que un sitio web sea responsivo en todos los tamaños de pantallas.
- Consume mucho tiempo.
VW significa Viewport Width (ancho del dispositivo). Funciona como las unidades de porcentaje, especificar 10vw es equivalente a ocupar 10% del ancho visible de la pantalla.
Para experimentar con resultados, haz estos cambios en tu código CSS.?
Nota: comenta la última línea en la clase .caja.
.text {
display: none;
}
.caja {
width: 50vw;
height: 300px;
/* display: none; */
}Si observas con cuidado, puedes ver que 50vw significa 50%, lo cual cubrirá la mitad del ancho de la pantalla.
En JavaScript, descomenta esta línea al final.?
// Caja ancho y alto
caja.innerHTML = "Width : " + caja_width;
// caja.innerHTML = "Height : " + caja_height;El resultado sería el siguiente.?
Como podrás ver, ese elemento siempre cubrirá ese espacio incluso si cambiamos el tamaño de la ventana.
¿Qué son las unidades VH?
VH significa viewport height (altura del dispositivo). También funciona como porcentaje, especificar 10vh es equivalente a ocupar 10% de la altura visible de la pantalla.
Mira esta demostración.?
.texto {
display: none;
}
.caja {
width: 300px;
height: 50vh;
/* display: none; */
}Si miras cuidadosamente puedes ver que 50vh significa 50%, lo que cubrirá el 50% de la altura de la pantalla.
En JavaScript, descomenta esta línea al final.?
//Caja ancho y alto
// caja.innerHTML = "Width : " + Caja_width;
caja.innerHTML = "Height : " + Caja_height;También cambia esto.?
// Tamaño de la pantalla (ancho y alto)
// tamaño.innerHTML = "Width : " + Width + " px";
tamaño.innerHTML = "Height : " + Height + " px";Resultado.?
Como puedes ver, siempre cubrirá ese espacio incluso si cambiamos el tamaño de la pantalla.
! Eso es todo¡
Conclusión
!Felicitaciones¡ Ahora puedes usar REM, EM, VW y VH con confianza para hacer sitios web responsivos.
Aquí está tu medalla ?️ por haber leído hasta el fin. ❤️
Recursos adicionales
Tutorial completo de consulta de medios.
Créditos
- Imágenes de Freepik