Qué es Calculadora de unidades container query?
Las unidades de consulta de contenedor funcionan como unidades de ventana gráfica pero son relativas a un contenedor de consulta en lugar de la ventana gráfica. cqi es el 1% del tamaño inline del contenedor, cqw es el 1% del ancho del contenedor, cqb es el 1% del tamaño del bloque del contenedor, cqmin y cqmax son el mínimo/máximo de cqi y cqb. Permiten un dimensionamiento responsivo a nivel de componente donde un componente se adapta a su contenedor, no a la ventana del navegador.
Respuesta rápida
Use unidades de consulta de contenedor (cqi, cqw, cqb, cqmin, cqmax) con clamp() para dimensionamiento responsivo a nivel de componente. Funcionan como unidades de ventana gráfica pero escalan con el ancho del contenedor padre. Establezca container-type: inline-size en el padre y use la expresión clamp() en los estilos hijos.
Last updated: 2026-05-28
Limitaciones
- Las unidades de consulta de contenedor requieren que container-type esté configurado en un ancestro. Sin un contexto de contenedor establecido, retroceden a un comportamiento relativo a la ventana gráfica, lo que puede producir valores mucho mayores de lo previsto.
- El soporte del navegador para unidades de consulta de contenedor coincide con el soporte de consultas de contenedor: Chrome 105+, Firefox 110+, Safari 16+, Edge 105+. Los navegadores más antiguos no reconocen estas unidades en absoluto.
- Cuando existen múltiples contenedores ancestros, se utiliza el ancestro más cercano con container-type configurado. Esto puede producir un comportamiento inesperado si un componente profundamente anidado referencia accidentalmente un contenedor más cercano.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
Cómo usar esta herramienta
- Ingrese los tamaños mínimo y máximo objetivo para su propiedad CSS en píxeles.
- Establezca el rango de ancho del contenedor — el ancho mínimo del contenedor donde la propiedad alcanza su mínimo, y el ancho máximo donde alcanza su máximo.
- Elija una unidad de consulta de contenedor y el nombre de la propiedad CSS.
- Copie la expresión clamp() y asegúrese de que el elemento padre tenga container-type: inline-size.
Para qué puedes usarla
- Hacer que el tamaño de fuente del título de una tarjeta escale con el ancho de la tarjeta en lugar del ancho de la ventana gráfica.
- Crear un relleno de componente que se adapte al espacio disponible del contenedor.
- Construir widgets de panel de control donde cada elemento escale proporcionalmente al contenedor del widget.