| Unidad | Guía completa de todas las unidades CSS: absolutas, relativas, viewport, contenedor y unidades de grid con ejemplos prácticos y conversor interactivo. | |
|---|---|---|
pxAbsolute | Pixels — 1/96th of 1 inch on screen | |
ptAbsolute | Points — 1/72nd of 1 inch (print) | |
pcAbsolute | Picas — 12 points = 1 pica | |
cmAbsolute | Centimeters | |
mmAbsolute | Millimeters | |
inAbsolute | Inches (1in = 96px) | |
QAbsolute | Quarter-millimeters (1Q = 0.25mm) |
| Unidad | Guía completa de todas las unidades CSS: absolutas, relativas, viewport, contenedor y unidades de grid con ejemplos prácticos y conversor interactivo. | |
|---|---|---|
emRelative (font) | Relative to parent element's font-size | |
remRelative (font) | Relative to root (:root) font-size | |
chRelative (font) | Width of the '0' character in current font | |
exRelative (font) | Height of lowercase 'x' in current font | |
capRelative (font) | Cap height of current font | |
icRelative (font) | Advance measure of '水' (CJK ideograph) | |
lhRelative (font) | Line height of the element | |
%Relative (parent) | Percentage of parent element's value |
| Unidad | Guía completa de todas las unidades CSS: absolutas, relativas, viewport, contenedor y unidades de grid con ejemplos prácticos y conversor interactivo. | |
|---|---|---|
vwViewport | 1% of viewport width | |
vhViewport | 1% of viewport height | |
vminViewport | 1% of the smaller viewport dimension | |
vmaxViewport | 1% of the larger viewport dimension | |
svhViewport (dynamic) | Small viewport height (excludes mobile browser chrome) | |
dvhViewport (dynamic) | Dynamic viewport height (updates with browser chrome) | |
lvhViewport (dynamic) | Large viewport height (browser chrome hidden) | |
svw / dvw / lvwViewport (dynamic) | Small/Dynamic/Large viewport width variants |
| Unidad | Guía completa de todas las unidades CSS: absolutas, relativas, viewport, contenedor y unidades de grid con ejemplos prácticos y conversor interactivo. | |
|---|---|---|
cqwContainer | 1% of query container's inline size (width) | |
cqhContainer | 1% of query container's block size (height) | |
cqiContainer | 1% of container's inline size | |
cqbContainer | 1% of container's block size | |
cqminContainer | 1% of smaller container dimension | |
cqmaxContainer | 1% of larger container dimension |
| Unidad | Guía completa de todas las unidades CSS: absolutas, relativas, viewport, contenedor y unidades de grid con ejemplos prácticos y conversor interactivo. | |
|---|---|---|
frGrid | Fraction of available grid track space | |
min-contentGrid keyword | Smallest content fits without overflow | |
max-contentGrid keyword | Content's ideal unconstrained width | |
fit-content(N)Grid function | Clamps max-content to N maximum | |
minmax(N, M)Grid function | Track size between minimum N and maximum M |
Escala con el tamaño de fuente :root, respeta la configuración del navegador del usuario, consistente entre componentes
Evitar px — no respeta las preferencias de fuente del usuario
rem para espaciado global consistente; em para espaciado relativo al tamaño de fuente del componente
Evitar px para componentes que se escalan
% para contenedores fluidos; ch (45–75ch) para longitud de línea de prosa óptima
Evitar px fijo para el ancho del contenido principal
dvh evita la superposición del cromo del navegador móvil; vh está bien solo para escritorio
Evitar 100vh solo en móvil — la barra de URL recorta el contenido
Distribuye el espacio restante proporcionalmente; más limpio que % en grid
Evitar combinar fr con columnas px fijas ingenuamente
Renderizado preciso en píxeles; no necesita escalar con el texto
No hay necesidad de unidades relativas aquí
Use rem para los tamaños de fuente. rem es relativo al tamaño de fuente del elemento raíz (normalmente 16px), lo que facilita escalar toda la interfaz de usuario cambiando el tamaño de fuente raíz. Esto también respeta las preferencias de tamaño de fuente del navegador del usuario, mejorando la accesibilidad. Use px solo para bordes, sombras y elementos que no deben escalar.
em es relativo al tamaño de fuente del elemento padre, lo que puede multiplicarse en elementos anidados. rem es relativo al tamaño de fuente del elemento raíz ('<'html>), haciéndolo más predecible. Para los tamaños de fuente, generalmente se prefiere rem. em es útil para el relleno y los márgenes que deben escalar con el tamaño de fuente propio del componente.
Use vw/vh para elementos que deben dimensionarse en relación con el viewport del navegador (por ejemplo, secciones hero a pantalla completa, modales). Use porcentajes para elementos que deben dimensionarse en relación con su contenedor padre. dvh (dynamic viewport height) se prefiere sobre vh en móviles donde la barra de direcciones afecta la altura.
Las unidades de consulta de contenedor (cqw, cqh, cqi, cqb) son relativas al tamaño de un elemento contenedor en lugar del viewport. Requieren un contexto de contenedor (container-type: inline-size). Son ideales para componentes verdaderamente responsivos que necesitan adaptarse al tamaño de su contenedor independientemente del tamaño del viewport.