Curso de CSS
Dale estilo y vida a la web.
Aprende CSS con ejemplos interactivos y crea proyectos reales.
px es una unidad fija; rem, em y % son relativas y se adaptan mejor a distintos tamaños de pantalla y preferencias del usuario.
Explicación
Estas son las unidades de medida más usadas en CSS:
pxUnidad fija en píxeles; no cambia aunque el usuario ajuste el tamaño de fuente de su navegador.
remRelativa al tamaño de fuente del elemento raíz (<html>); es la unidad más recomendada para tamaños de texto.
emRelativa al tamaño de fuente del elemento padre; útil pero puede acumularse de forma confusa si se anida mucho.
%Relativa al tamaño del elemento contenedor; muy usada para anchos flexibles.
Reto rápido
Cambia width: 80% por un valor fijo en px y observa qué tan menos flexible se vuelve la tarjeta.
En esta lección
- Ejemplo interactivo
- Explicación de cada etiqueta
- Cuándo usarlo
- Errores comunes
Consejo
Usar rem para tipografía respeta la configuración de accesibilidad del usuario: si alguien agranda el texto en su navegador, tu diseño responde correctamente.
Dato extra
Por defecto, la mayoría de los navegadores usan 16px como tamaño base de fuente, por eso 1rem equivale normalmente a 16px.
Error común
Fijar todos los tamaños en px, incluida la tipografía: el diseño se vuelve rígido y no respeta la preferencia de tamaño de texto del usuario.
Siguiente paso
Con unidades relativas ya tienes una base flexible. El siguiente paso es adaptar el diseño según el tamaño de la pantalla con media queries.
Ir a la siguiente lección