Unidades de consulta de contenedor: cqw y cqh
Dimensione los elementos en relación con su contenedor de consulta mediante cqw, cqh y otras unidades de contenedor relacionadas.
Unidades de consulta de contenedor: cqw y cqh es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 3 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
Unidades de consulta de contenedor
CSS proporciona unidades relativas al contenedor que dimensionan los valores como porcentajes de las dimensiones del contenedor de consulta, de forma similar a las unidades de la ventana gráfica (vw/vh), pero relativas al contenedor del componente.
cqw — Ancho de consulta del contenedor
1cqw = el 1 % del tamaño en línea del contenedor (el ancho en una escritura horizontal). Escale la tipografía y el espaciado en relación con el contenedor del componente.
<div class="card-wrapper"><h3 class="card-title">Fluid Card Title</h3></div>
cqh — Alto de consulta del contenedor
1cqh = el 1 % del tamaño de bloque del contenedor (el alto). Requiere container-type: size, no solo inline-size.
<div class="hero-wrapper"><div class="hero-card">Hero Text</div></div>
cqi — Dimensión en línea del contenedor
cqi es un alias de cqw en una escritura horizontal; hace referencia específicamente a la dimensión en línea, no está vinculada a la horizontal.
cqb — Dimensión de bloque del contenedor
cqb funciona como cqh, pero es relativa a la dimensión: hace referencia al tamaño de bloque independientemente del modo de escritura.
cqmin y cqmax
cqmin = el 1 % de la dimensión menor del contenedor. cqmax = el 1 % de la dimensión mayor. Son análogas a vmin/vmax.
<div class="icon-wrapper"><div class="icon"></div></div>
Tipografía fluida en componentes
Las unidades del contenedor permiten crear una tipografía fluida verdaderamente limitada al ámbito del componente:
<div class="card-wrapper"><h3 class="card-title">Fluid Title</h3></div>
Cuándo usar unidades del contenedor
Use unidades del contenedor cuando:
- El texto de un componente deba escalarse según el ancho del componente
- El espaciado dentro de un componente deba ser proporcional a su tamaño
- Quiera un diseño fluido a nivel de componente independiente de la ventana gráfica
Unidades del contenedor frente a unidades de la ventana gráfica
La diferencia principal es la siguiente: las unidades de la ventana gráfica (vw, vh) hacen referencia a la ventana gráfica del navegador. Las unidades del contenedor (cqw, cqh) hacen referencia al contenedor de consulta más cercano. Esto hace que los componentes sean realmente portátiles: el mismo componente se ve proporcionalmente correcto tanto en una barra lateral de 300 px como en un área principal de 900 px.
Requisito: container-type
Las unidades del contenedor solo funcionan cuando existe un antecesor con container-type. Sin uno, la unidad de consulta del contenedor recurre a la unidad de ventana gráfica pequeña (svw/svh).
Patrón práctico
Un componente completo que usa unidades del contenedor:
<div class="feature">
<h2 class="feature-title">Feature Name</h2>
<p class="feature-text">A short description of this feature that scales with the container.</p>
</div>
Comprobación rápida
¿Qué valor produce font-size: 5cqw en un componente situado dentro de un contenedor de 400 px de ancho?
Resumen
Las unidades de consulta de contenedor (cqw, cqh, cqi, cqb, cqmin, cqmax) dimensionan los valores en relación con el contenedor de consulta, no con la ventana gráfica. Use cqw para crear una tipografía fluida que escale con el ancho del componente. Estas unidades requieren un antecesor con container-type; sin uno, recurren a las unidades de la ventana gráfica.
Preguntas frecuentes
¿La lección «Unidades de consulta de contenedor: cqw y cqh» es gratis?
Sí — el texto completo de «Unidades de consulta de contenedor: cqw y cqh» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Unidades de consulta de contenedor: cqw y cqh»?
Dimensione los elementos en relación con su contenedor de consulta mediante cqw, cqh y otras unidades de contenedor relacionadas. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 4.
¿Cuánto tiempo toma la lección «Unidades de consulta de contenedor: cqw y cqh»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- container-type y container-name
- Reglas @container y breakpoints
- Unidades de consulta de contenedor: cqw y cqh
- Container queries frente a media queries