{}
Aprende diseño y desarrollo web
Cursos gratuitos interactivos

Unidades en CSS: px, rem, %, vw y clamp()

Domina las unidades absolutas y relativas para crear diseños flexibles y legibles.

px es absoluto y útil para bordes, pero para texto es mejor usar unidades relativas.

rem se basa en el tamaño raíz y facilita escalas tipográficas coherentes.

em depende del contenedor y es ideal para componentes reutilizables.

% y vw/vh permiten adaptar tamaños al contenedor o a la pantalla.

  • Qué usar y cuándo para evitar diseños rígidos.
  • Las unidades absolutas como px son predecibles, pero no escalan bien en pantallas y preferencias del usuario.
  • Las unidades relativas (rem, em, %, vw, vh, fr) se adaptan al contexto y hacen que el diseño respire mejor.
  • px: útil para bordes y sombras, evita en tipografía.
  • rem: escala global, base ideal para texto.

Mapa rápido de unidades

Qué usar y cuándo para evitar diseños rígidos.

Las unidades absolutas como px son predecibles, pero no escalan bien en pantallas y preferencias del usuario.

Las unidades relativas (rem, em, %, vw, vh, fr) se adaptan al contexto y hacen que el diseño respire mejor.

  • px: útil para bordes y sombras, evita en tipografía.
  • rem: escala global, base ideal para texto.
  • em: escala local, perfecta para componentes.
  • %: depende del contenedor, útil en anchos y paddings.
  • vw/vh: relativo a la ventana, útil para hero y layouts.
  • fr: unidad de Grid que representa una fracción del espacio disponible.

rem y em: la base de una buena escala

Define una base y todo crece de forma coherente.

Con rem puedes definir una escala tipográfica consistente para todo el sitio.

Con em puedes ajustar tamaños dentro de un componente sin romper el resto del diseño.

Tamaños fluidos con clamp()

Evita saltos bruscos en responsive.

clamp() te permite definir un tamaño mínimo, uno preferido y un máximo.

Es ideal para títulos que deben crecer suavemente entre móvil y escritorio.

Cuándo usar cada unidad CSS

CSS
09

Unidades en CSS: px, rem, %, vw y clamp()

Domina las unidades absolutas y relativas para crear diseños flexibles y legibles.

¿Cuánto sabes de CSS?

Código del tema: display: grid; gap: 1rem;

📘 Teoría

Mapa rápido de unidades

Qué usar y cuándo para evitar diseños rígidos.

Las unidades absolutas como px son predecibles, pero no escalan bien en pantallas y preferencias del usuario.

Las unidades relativas (rem, em, %, vw, vh, fr) se adaptan al contexto y hacen que el diseño respire mejor.

  • px: útil para bordes y sombras, evita en tipografía.
  • rem: escala global, base ideal para texto.
  • em: escala local, perfecta para componentes.
  • %: depende del contenedor, útil en anchos y paddings.
  • vw/vh: relativo a la ventana, útil para hero y layouts.
  • fr: unidad de Grid que representa una fracción del espacio disponible.
  • ch: útil para inputs y monospace.
  • min()/max()/clamp(): límites y tamaños fluidos.

rem y em: la base de una buena escala

Define una base y todo crece de forma coherente.

1

Con rem puedes definir una escala tipográfica consistente para todo el sitio.

2

Con em puedes ajustar tamaños dentro de un componente sin romper el resto del diseño.

Escala con rem y ajustes con em
:root {
  font-size: 16px;
}

body {
  font-size: 1rem;
}

.card {
  padding: 1.5rem;
}

.card small {
  font-size: 0.85em;
}

Tamaños fluidos con clamp()

Evita saltos bruscos en responsive.

1

clamp() te permite definir un tamaño mínimo, uno preferido y un máximo.

2

Es ideal para títulos que deben crecer suavemente entre móvil y escritorio.

Título fluido
h1 {
  font-size: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}

Cuándo usar cada unidad CSS

🧭 Visuales clave

Referencia de unidades CSS

Guia rapida para elegir la unidad adecuada segun el contexto.

Comparativa de unidades px, rem, em, vw, vh y porcentaje.

Comparativa adicional de unidades CSS

Complemento visual para elegir unidades según tipografía, layout y viewport.

Relación práctica entre unidades relativas y absolutas en distintos contextos.

🧪 Aprende probando

Ejemplo Escala tipográfica con rem Crea una jerarquía de títulos con rem.
⌄
Ejemplo Tarjeta fluida Usa % y clamp() para un layout flexible.
⌄

🏁 Retos

Reto Reto: título fluido Define un h1 con clamp() y base en rem.
⌄

🧰 Recursos

Enlaces útiles

web.dev Learn CSS - Sizing MDN length CSS-Tricks: CSS Units
Test

Comprueba tus conocimientos con un test sobre CSS.

Test de CSS
Recursos del curso 78
📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards 🧩 Snippets
‹
Lección 08
Modelo de caja en CSS: content, padding, border y margin
Lección 10
Sizing intrínseco: min-content, max-content, fit-content y auto
›

¿Qué es esto?

Soy Cristian Eslava y a veces hago webs para procrastinar yo y vosotros 😉.

Esta la hice en febrero de 2026 para facilitar el aprendizaje de mis alumnxs. Aprender desarrollo web practicando. La idea es que crezca semanalmente con nuevos temas, tests y retos.

Inspirado en MDN, en W3Schools, en Codepen, en el crack de Manz y en mil sitios de documentación sobre desarrollo web. Quería aportar además de bloques teóricos con ejemplos, la gamificación de los retos y el sistema de test que ya tenía en culTest .

Si te gustó, si no te gustó, si quieres saludarme, o invitarme a 🍻 no dudes en escribirme en cristianeslava@gmail.com .