¿Cuál es la diferencia entre unidades absolutas y unidades relativas en CSS?
Distingue entre unidades absolutas (ej. px, fijas) y relativas (ej. em, rem, %, vw, escalan con referencia) en CSS y cuándo usar cada una.
En CSS, las unidades de medida se dividen principalmente en absolutas y relativas, y su diferencia es fundamental para el diseño y la adaptabilidad de una web:
Unidades Absolutas:
Estas unidades tienen un tamaño fijo y no dependen del tamaño de otros elementos ni de la configuración de la ventana del navegador (viewport), al menos en teoría.
La unidad absoluta más común en el diseño web es el píxel (px). Otras unidades absolutas incluyen cm (centímetros), mm (milímetros), in (pulgadas), pt (puntos) y pc (picas), aunque estas son menos frecuentes para el diseño en pantalla.
Las unidades absolutas como px son útiles cuando se necesita un control dimensional exacto que no debe variar, por ejemplo, para definir el grosor de un borde (border: 1px solid black;).
Unidades Relativas:
El valor de estas unidades se calcula en relación con otra medida, lo que las hace flexibles e ideales para crear diseños adaptables y escalables.
Las más importantes son:
%(porcentaje): Su valor es relativo al valor de la misma propiedad en el elemento padre (por ejemplo,width: 50%significa que el elemento ocupará la mitad del ancho de su contenedor padre) o al tamaño de fuente del elemento (si se usa en propiedades comoline-height).em: Cuando se usa parafont-size, es relativa alfont-sizedel elemento padre. Si se usa para otras propiedades (comopadding,margin,width), es relativa alfont-sizedel propio elemento. Esto puede llevar a un efecto de composición si se anidan muchos elementos conem.rem(root em): Es relativa alfont-sizedel elemento raíz del documento (la etiqueta<html>). Esto evita el problema de composición deem, haciendo queremsea muy predecible y útil para escalar de forma consistente todo el diseño y la tipografía de una página.vwyvh: Unidades relativas al viewport.1vwes el 1% del ancho de la ventana gráfica, y1vhes el 1% de su altura.vminyvmax: Relativas al menor o mayor valor entrevwyvh.
En resumen, mientras las unidades absolutas ofrecen precisión fija, las unidades relativas proporcionan la flexibilidad necesaria para que los diseños se ajusten a diferentes tamaños de pantalla y preferencias del usuario, siendo cruciales para el diseño adaptable.
