Unidades Absolutas vs. Relativas
Las unidades CSS se dividen en dos categorias. Las unidades absolutas (px, pt, cm, mm, in) tienen tamanos fisicos fijos. Las unidades relativas (rem, em, %, vw, vh) escalan segun el contexto como el tamano de fuente o las dimensiones del viewport. Las unidades relativas son esenciales para el diseno web responsivo porque se adaptan a diferentes pantallas y configuraciones del usuario.
Entendiendo rem y em
rem referencia el tamano de fuente del elemento raiz; si html tiene font-size: 16px, entonces 1rem equivale a 16px en todas partes. em referencia el tamano de fuente del padre del elemento actual, lo que significa que los valores em anidados se acumulan. La mayoria de los frameworks modernos prefieren rem por consistencia y predecibilidad en componentes profundamente anidados.
Unidades de Viewport: vw y vh
1vw equivale al 1% del ancho del viewport; 1vh equivale al 1% del alto del viewport. Estas unidades son poderosas para layouts de pantalla completa, tipografia responsiva y espaciado que escala con la ventana del navegador. Ten cuidado en moviles donde la barra de direcciones puede afectar el alto del viewport.
Cuando Usar Unidades Fisicas
Las unidades fisicas como pt, cm, mm e in estan destinadas a medios de impresion. Los puntos (pt) son estandar en tipografia de impresion donde 72pt equivalen a una pulgada. Usa unidades fisicas en hojas de estilo @media print; evitalas para layouts de pantalla porque el DPI varia entre dispositivos.
