Cargando...
Guía Completa de Unidades CSS
Esta guía proporciona a los desarrolladores un recurso completo para todas las unidades CSS, abarcando desde longitudes absolutas y relativas, unidades de vista (viewport), de consulta de contenedor, porcentajes, ángulos, tiempo, frecuencia, resolución, color, funciones y unidades de cuadrícula. Está diseñada para consulta rápida y aplicación práctica en proyectos reales: interfaces adaptativas, tipografía, diseño de grids y animaciones. Cada unidad incluye descripción, conversión, ejemplos de uso y compatibilidad con navegadores. La organización por categorías permite a los desarrolladores encontrar rápidamente la unidad adecuada y aplicarla de manera eficiente en sus hojas de estilo CSS.
📊 Absolute Length Units
| Unit | Description | Conversion | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| px | Píxeles - píxeles del dispositivo | 1px = 1/96 inch | width: 300px | Diseños en pantalla, bordes, sombras | Todos los navegadores |
| cm | Centímetros | 1cm = 37.8px | margin: 2cm | Impresión, medidas físicas | Todos los navegadores |
| mm | Milímetros | 1mm = 3.78px | border: 1mm solid | Medidas precisas, medios impresos | Todos los navegadores |
| in | Pulgadas | 1in = 96px | page-break-after: 2in | Impresión, grandes dimensiones | Todos los navegadores |
| pt | Puntos | 1pt = 1.33px | font-size: 12pt | Tipografía, medios impresos | Todos los navegadores |
| pc | Picas | 1pc = 16px | line-height: 1.5pc | Tipografía impresa, ancho de columnas | Todos los navegadores |
| Q | Cuarto de milímetro | 1Q = 0.25mm | margin: 4Q | Impresión, medidas muy precisas | Navegadores modernos |
📊 Relative Length Units
| Unit | Description | Relative To | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| em | Unidad em | Tamaño de fuente del elemento padre | font-size: 1.2em | Tipografía, espaciado relativo al texto | Todos los navegadores |
| rem | Root em | Tamaño de fuente del elemento raíz | margin: 2rem | Espaciado consistente, layouts escalables | IE9+ |
| ex | Altura x | Altura de la letra ‘x’ del font actual | line-height: 2ex | Tipografía, alineación vertical | Todos los navegadores |
| ch | Ancho de carácter | Ancho del carácter ‘0’ en la fuente actual | width: 40ch | Contenedores de texto, layouts monoespaciados | IE9+ |
| cap | Altura de mayúscula | Altura de letras mayúsculas | margin-top: 1cap | Tipografía, espaciado vertical | Navegadores modernos |
| ic | Carácter ideográfico | Ancho de carácter ideográfico CJK | width: 20ic | Tipografía asiática | Navegadores modernos |
| lh | Altura de línea | Altura de línea del elemento | margin: 1lh | Ritmo vertical, espaciado | Navegadores modernos |
| rlh | Altura de línea raíz | Altura de línea del elemento raíz | padding: 0.5rlh | Espaciado vertical consistente | Navegadores modernos |
📊 Viewport Units
| Unit | Description | Calculation | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| vw | Ancho del viewport | 1% del ancho de la ventana | width: 50vw | Layouts de ancho completo, diseño responsivo | IE9+ |
| vh | Altura del viewport | 1% de la altura de la ventana | height: 100vh | Secciones de altura completa, hero areas | IE9+ |
| vmin | Viewport mínimo | 1% de la dimensión menor | font-size: 4vmin | Elementos cuadrados, tipografía responsiva | IE9+ |
| vmax | Viewport máximo | 1% de la dimensión mayor | width: 50vmax | Layouts responsivos | IE9+ |
| vi | Viewport inline | 1% en dirección inline | padding: 2vi | Propiedades lógicas, layouts internacionales | Navegadores modernos |
| vb | Viewport block | 1% en dirección block | margin: 3vb | Propiedades lógicas, modos de escritura | Navegadores modernos |
| dvw | Ancho dinámico | 1% de ancho dinámico | width: 100dvw | Layouts móviles, manejo de barra de dirección | Navegadores modernos |
| dvh | Altura dinámica | 1% de altura dinámica | height: 100dvh | UI móvil de altura completa | Navegadores modernos |
| lvw | Viewport ancho grande | 1% de ancho grande | max-width: 90lvw | Layouts móviles, UI visible | Navegadores modernos |
| lvh | Viewport alto grande | 1% de alto grande | min-height: 100lvh | Layouts móviles, altura máxima | Navegadores modernos |
| svw | Viewport ancho pequeño | 1% de ancho pequeño | width: 100svw | Layouts móviles, UI oculta | Navegadores modernos |
| svh | Viewport alto pequeño | 1% de alto pequeño | height: 100svh | Layouts móviles, altura mínima | Navegadores modernos |
📊 Container Query Units
| Unit | Description | Calculation | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| cqw | Ancho contenedor | 1% del ancho del contenedor | width: 50cqw | Diseño responsivo basado en contenedor | Navegadores modernos |
| cqh | Altura contenedor | 1% de la altura del contenedor | height: 80cqh | Layouts basados en contenedor | Navegadores modernos |
| cqi | Inline contenedor | 1% del tamaño inline | padding: 2cqi | Layouts lógicos de contenedor | Navegadores modernos |
| cqb | Block contenedor | 1% del tamaño block | margin: 1cqb | Sizing dirección block | Navegadores modernos |
| cqmin | Mínimo contenedor | 1% de la dimensión menor | font-size: 3cqmin | Tipografía basada en contenedor | Navegadores modernos |
| cqmax | Máximo contenedor | 1% de la dimensión mayor | border-radius: 2cqmax | Estilizado basado en contenedor | Navegadores modernos |
📊 Percentage Units
| Unit | Description | Relative To | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| % | Porcentaje | Propiedad correspondiente del elemento padre | width: 50% | Layouts flexibles, diseño responsivo | Todos los navegadores |
📊 Angle Units
| Unit | Description | Conversion | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| deg | Grados | 360deg = círculo completo | transform: rotate(45deg) | Rotaciones, gradientes | Todos los navegadores |
| grad | Gradianes | 400grad = círculo completo | transform: rotate(100grad) | Cálculos matemáticos, gradientes | Todos los navegadores |
| rad | Radianes | 2π rad = círculo completo | transform: rotate(1.57rad) | Transformaciones matemáticas | Todos los navegadores |
| turn | Vueltas | 1turn = círculo completo | transform: rotate(0.25turn) | Rotaciones intuitivas, animaciones | IE9+ |
📊 Time Units
| Unit | Description | Conversion | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| s | Segundos | 1s = 1000ms | transition-duration: 2s | Animaciones, transiciones | Todos los navegadores |
| ms | Milisegundos | 1000ms = 1s | animation-delay: 500ms | Temporización precisa, animaciones rápidas | Todos los navegadores |
📊 Frequency Units
| Unit | Description | Conversion | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| Hz | Hertz | 1Hz = 1 ciclo/segundo | No se usa comúnmente en CSS | Propiedades de audio (futuro) | Limitado |
| kHz | Kilohertz | 1kHz = 1000Hz | No se usa comúnmente en CSS | Propiedades de audio (futuro) | Limitado |
📊 Resolution Units
| Unit | Description | Definition | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| dpi | Puntos por pulgada | Puntos físicos por pulgada | @media (min-resolution: 300dpi) | Displays High-DPI, medios impresos | IE9+ |
| dpcm | Puntos por cm | Puntos físicos por cm | @media (min-resolution: 118dpcm) | Medidas métricas, impresión | IE9+ |
| dppx | Puntos por unidad px | Píxeles de dispositivo por px CSS | @media (min-resolution: 2dppx) | Retina displays, DPR | IE9+ |
| x | Alias para dppx | Igual a dppx | @media (min-resolution: 2x) | Retina displays, sintaxis simplificada | Navegadores modernos |
📊 Color Units
| Unit | Description | Format | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| \# | Hexadecimal | #RRGGBB o #RGB | color: #ff0000 | Notación estándar de color | Todos los navegadores |
| rgb() | Función RGB | rgb(r, g, b) | color: rgb(255, 0, 0) | Control preciso de color | Todos los navegadores |
| rgba() | RGB con alpha | rgba(r, g, b, a) | background: rgba(255, 0, 0, 0.5) | Colores transparentes | IE9+ |
| hsl() | Función HSL | hsl(h, s%, l%) | color: hsl(0, 100%, 50%) | Selección intuitiva de color | IE9+ |
| hsla() | HSL con alpha | hsla(h, s%, l%, a) | background: hsla(0, 100%, 50%, 0.5) | Colores HSL transparentes | IE9+ |
| hwb() | Función HWB | hwb(h w% b%) | color: hwb(0 0% 0%) | Modelo de color alternativo | Navegadores modernos |
| lab() | Función Lab | lab(l a b) | color: lab(50% 20 -30) | Espacio de color perceptual | Navegadores modernos |
| lch() | Función LCH | lch(l c h) | color: lch(50% 40 180) | Espacio de color cilíndrico Lab | Navegadores modernos |
| oklab() | Función OKLab | oklab(l a b) | color: oklab(0.5 0.2 -0.3) | Mejora del espacio Lab | Navegadores modernos |
| oklch() | Función OKLCH | oklch(l c h) | color: oklch(0.5 0.4 180) | Mejora del espacio LCH | Navegadores modernos |
| color() | Función Color | color(space r g b) | color: color(display-p3 1 0 0) | Espacios de color amplio | Navegadores modernos |
📊 Function Units
| Unit | Description | Calculation | Example | Use Cases | Browser Support |
|---|---|---|---|---|---|
| calc() | Cálculo matemático | Combina diferentes unidades | width: calc(100% - 20px) | Cálculos con unidades mixtas | IE9+ |
| min() | Valor mínimo | Retorna el valor más pequeño | width: min(100px, 50%) | Restricciones responsivas | Navegadores modernos |
| max() | Valor máximo | Retorna el valor más grande | width: max(200px, 50%) | Restricciones mínimas responsivas | Navegadores modernos |
| clamp() | Valor limitado | clamp(min, preferred, max) | font-size: clamp(1rem, 4vw, 2rem) | Tipografía adaptativa con límites | Navegadores modernos |
| attr() | Valor de atributo | Usa valor de atributo HTML | width: attr(data-width px) | Valores dinámicos desde HTML | Soporte limitado |
| var() | Variable CSS | Usa custom property | color: var(--main-color) | Propiedades personalizadas CSS | IE11+ parcial, navegadores modernos |
📊 Grid Units
| Unit | Description | Definition | Example |
|---|
Code Example 15
css
CSS Code
/* Mezcla de unidades absolutas y relativas */
.container {
width: calc(100vw - 2rem);
max-width: 1200px;
padding: 1em 5%;
}
/* Tipografía responsiva con clamp */
.heading {
font-size: clamp(1.5rem, 4vw, 3rem);
line-height: 1.2;
margin-bottom: 1em;
}
/* Unidades viewport para layouts full-screen */
.hero {
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
}
/* Container query units para componentes */
.card {
width: 100cqw;
padding: 2cqi;
font-size: clamp(0.875rem, 3cqw, 1.25rem);
}
/* CSS Grid con unidades fr */
.grid-layout {
display: grid;
grid-template-columns: 200px 1fr 2fr;
gap: 1rem;
}- Utiliza unidades relativas (rem, em, %) para diseños escalables y accesibles.
- Prefiere rem sobre em para un espaciado consistente.
- Usa viewport units (vw, vh) con cuidado, ya que no consideran scrollbars.
- Considera clamp() para tipografía adaptativa y suave.
- Mezcla unidades estratégicamente con calc() para layouts complejos.
- Usa px para bordes, sombras y elementos decorativos.
- Prueba container query units en navegadores compatibles antes de producción.
- Emplea fr en CSS Grid para layouts flexibles e intuitivos.
- Verifica compatibilidad de nuevas unidades como dvh, lvh, svh.
- Considera unidades lógicas (vi, vb) para layouts internacionales.
- Utiliza HSL/HSB para manipulación de colores y tematización.
- Proporciona siempre fallbacks para unidades modernas en navegadores antiguos.
- Testea combinaciones de unidades en diferentes dispositivos y resoluciones.
🧠 Pon a Prueba tu Conocimiento
Listo para Empezar
Reference Knowledge Check
Evalúa tu conocimiento sobre las unidades CSS.
3
Preguntas
70%
Para Aprobar
∞
Tiempo
∞
Intentos
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior