Unità delle container query: cqw cqh
Dimensioni gli elementi in relazione al contenitore della query utilizzando cqw, cqh e le relative unità dei contenitori.
Unità delle container query: cqw cqh è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.
Unità delle container query
CSS mette a disposizione unità relative al contenitore, che dimensionano i valori come percentuali delle dimensioni del contenitore della query, in modo simile alle unità del viewport (vw/vh), ma in relazione al contenitore del componente.
cqw — Larghezza della container query
1cqw = l'1% della dimensione inline del contenitore (la larghezza nella scrittura orizzontale). Ridimensioni tipografia e spaziatura in relazione al contenitore del componente.
<div class="card-wrapper"><h3 class="card-title">Fluid Card Title</h3></div>
cqh — Altezza della container query
1cqh = l'1% della dimensione block del contenitore (l'altezza). Richiede container-type: size, non solo inline-size.
<div class="hero-wrapper"><div class="hero-card">Hero Text</div></div>
cqi — Dimensione inline del contenitore
cqi è un alias di cqw nella scrittura orizzontale e fa riferimento specificamente alla dimensione inline, senza essere legato all'orizzontale.
cqb — Dimensione block del contenitore
cqb è simile a cqh, ma è relativo alla dimensione: fa riferimento alla dimensione block indipendentemente dalla modalità di scrittura.
cqmin e cqmax
cqmin = l'1% della dimensione minore del contenitore. cqmax = l'1% della dimensione maggiore. Sono analoghi a vmin/vmax.
<div class="icon-wrapper"><div class="icon"></div></div>
Tipografia fluida nei componenti
Le unità del contenitore consentono di applicare una tipografia fluida realmente limitata al componente:
<div class="card-wrapper"><h3 class="card-title">Fluid Title</h3></div>
Quando usare le unità del contenitore
Usi le unità del contenitore quando:
- Il testo di un componente deve ridimensionarsi in base alla larghezza del componente
- La spaziatura all'interno di un componente deve essere proporzionale alle sue dimensioni
- Desidera un design fluido a livello di componente, indipendente dal viewport
Unità del contenitore e unità del viewport
La differenza fondamentale è questa: le unità del viewport (vw, vh) fanno riferimento al viewport del browser. Le unità del contenitore (cqw, cqh) fanno riferimento al contenitore di query più vicino. In questo modo i componenti sono realmente portabili: lo stesso componente mantiene proporzioni corrette sia in una sidebar larga 300px sia in un'area principale larga 900px.
Obbligatorio: container-type
Le unità del contenitore funzionano solo quando esiste un antenato con container-type. In sua assenza, l'unità della container query ricade sull'unità del viewport piccolo (svw/svh).
Schema pratico
Un componente completo che usa le unità del contenitore:
<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>
Verifica rapida
Quale valore produce font-size: 5cqw in un componente contenuto in un contenitore largo 400px?
Riepilogo
Le unità delle container query (cqw, cqh, cqi, cqb, cqmin, cqmax) dimensionano i valori in relazione al contenitore di query anziché al viewport. Usi cqw per una tipografia fluida che si adatta alla larghezza del componente. Per funzionare richiedono un antenato con container-type; in sua assenza, ricadono sulle unità del viewport.
Domande Frequenti
La lezione «Unità delle container query: cqw cqh» è gratuita?
Sì — il testo completo di «Unità delle container query: cqw cqh» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Unità delle container query: cqw cqh»?
Dimensioni gli elementi in relazione al contenitore della query utilizzando cqw, cqh e le relative unità dei contenitori. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare CSS Academy?
Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.
Quanto tempo richiede la lezione «Unità delle container query: cqw cqh»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione CSS Academy?
Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- container-type e container-name
- Regole @container e breakpoint
- Unità delle container query: cqw cqh
- Container query e media query a confronto