Lección 4: Unidades CSS
Introducción a las unidades CSS
Las unidades CSS son fundamentales para definir tamaños, distancias y otras medidas en el diseño web. CSS ofrece una variedad de unidades que se pueden clasificar en dos tipos principales: unidades absolutas y unidades relativas.
Unidades Absolutas
Las unidades absolutas son fijas y aparecerán del mismo tamaño independientemente del dispositivo o las configuraciones del usuario.
- px (píxeles): La unidad más común. Un píxel es un punto en la pantalla.
- pt (puntos): Utilizado principalmente para impresión. 1pt = 1/72 de pulgada.
- cm (centímetros): Raramente usado en diseño web, más común en CSS para impresión.
- mm (milímetros): Similar a cm, pero en milímetros.
- in (pulgadas): 1in = 96px = 2.54cm.
h1 { font-size: 24px; }
.box { width: 2in; height: 3cm; }
Unidades Relativas
Las unidades relativas son más flexibles y se ajustan basándose en otros factores. Son cruciales para el diseño responsivo.
Relativas a la fuente:
- em: Relativo al tamaño de fuente del elemento. Si el tamaño de fuente es 16px, 1em = 16px.
- rem: Relativo al tamaño de fuente del elemento raíz (normalmente el <html>).
- ex: Relativo a la altura de la letra 'x' de la fuente del elemento.
- ch: Relativo al ancho del carácter "0" de la fuente del elemento.
Relativas al viewport:
Antes de explicar estas unidades, es importante entender qué es el viewport:
Viewport: El viewport es el área visible de una página web en la pantalla del dispositivo. En dispositivos de escritorio, el viewport es el tamaño de la ventana del navegador (excluyendo barras de herramientas y desplazamiento). En dispositivos móviles, es el área de visualización del dispositivo, que puede ser diferente del tamaño de la pantalla debido al factor de escala.
- vw (viewport width): 1vw es igual al 1% del ancho del viewport. Por ejemplo, si el viewport tiene 1000px de ancho, 1vw sería 10px.
- vh (viewport height): 1vh es igual al 1% de la altura del viewport. Si el viewport tiene 800px de alto, 1vh sería 8px.
- vmin: Es igual al 1% de la dimensión más pequeña del viewport. Si el ancho es 1000px y el alto es 800px, 1vmin sería 8px (1% de 800px).
- vmax: Es igual al 1% de la dimensión más grande del viewport. En el mismo ejemplo, 1vmax sería 10px (1% de 1000px).
Estas unidades son particularmente útiles para crear diseños responsivos que se ajusten al tamaño de la pantalla del dispositivo, independientemente de su resolución.
.hero-section {
height: 100vh; /* Ocupa toda la altura del viewport */
}
.sidebar {
width: 30vw; /* Ocupa el 30% del ancho del viewport */
}
.square {
width: 50vmin; /* Será cuadrado y se ajustará a la dimensión más pequeña */
height: 50vmin;
}
Porcentajes:
%: Relativo al elemento padre.
body { font-size: 16px; }
h1 { font-size: 2em; } /* 32px */
p { font-size: 1rem; } /* 16px */
.container { width: 80%; }
.full-width { width: 100vw; }
Cuándo usar cada unidad
- px: Útil para bordes o cuando necesitas precisión absoluta.
- em y rem: Excelentes para tipografía y espaciado. rem es más predecible que em.
- %: Ideal para layouts responsivos y anchos de elementos.
- vw y vh: Útiles para elementos que deben ser relativos al tamaño de la ventana del navegador.
Función calc()
CSS proporciona la función calc() que permite realizar cálculos para determinar valores de propiedades CSS. Puede mezclar unidades diferentes en un cálculo.
.sidebar { width: calc(100% - 80px); }
.banner { height: calc(100vh - 100px); }
Ejercicio práctico
Crea un diseño que utilice diversas unidades CSS. Incluye un encabezado con tamaño relativo a la fuente base, un contenedor principal con un ancho en porcentaje, y algunos elementos con dimensiones basadas en el viewport.