Enheder til containerforespørgsler: cqw cqh
Tilpas elementers størrelse i forhold til deres containerforespørgsel med cqw, cqh og relaterede containereenheder.
Enheder til containerforespørgsler: cqw cqh er en gratis CSS Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i CSS Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. CSS Academy-kurset indeholder 4 lektioner i alt.
Enheder til containerforespørgsler
CSS indeholder containerrelative enheder, der angiver størrelser som procentdele af forespørgselscontainerens dimensioner – svarende til viewport-enheder (vw/vh), men relative til komponentens container.
cqw — bredde for containerforespørgsel
1cqw = 1 % af containerens inline-størrelse (bredde ved vandret skrivning). Skaler typografi og afstande i forhold til komponentens container.
<div class="card-wrapper"><h3 class="card-title">Fluid Card Title</h3></div>
cqh — højde for containerforespørgsel
1cqh = 1 % af containerens block-størrelse (højde). Kræver container-type: size (ikke kun inline-size).
<div class="hero-wrapper"><div class="hero-card">Hero Text</div></div>
cqi — containerens inline-dimension
cqi er et alias for cqw ved vandret skrivning og henviser specifikt til inline-dimensionen (den er ikke bundet til vandret retning).
cqb — containerens block-dimension
cqb fungerer som cqh, men er dimensionsrelativ og henviser til block-størrelsen uanset skrivemåde.
cqmin og cqmax
cqmin = 1 % af containerens mindste dimension. cqmax = 1 % af den største. Svarer til vmin/vmax.
<div class="icon-wrapper"><div class="icon"></div></div>
Flydende typografi i komponenter
Containerenheder gør det muligt at bruge ægte komponentspecifik flydende typografi:
<div class="card-wrapper"><h3 class="card-title">Fluid Title</h3></div>
Hvornår skal du bruge containerenheder
Brug containerenheder, når:
- En komponents tekst skal skalere med komponentens bredde
- Afstande inde i en komponent skal være proportionale med dens størrelse
- Du ønsker et flydende design på komponentniveau, som er uafhængigt af viewporten
Containerenheder sammenlignet med viewport-enheder
Den afgørende forskel er, at viewport-enheder (vw, vh) refererer til browserens viewport. Containerenheder (cqw, cqh) refererer til den nærmeste forespørgselscontainer. Det gør komponenter virkelig flytbare – den samme komponent ser proportionalt korrekt ud i en sidebar på 300 px og i et hovedområde på 900 px.
Påkrævet: container-type
Containerenheder fungerer kun, når der findes en overordnet container med container-type. Uden en sådan falder containerforespørgselsenheden tilbage til den lille viewport-enhed (svw/svh).
Praktisk mønster
En komplet komponent, der bruger containerenheder:
<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>
Hurtigt tjek
Hvad giver font-size: 5cqw i en komponent, der er placeret i en container med en bredde på 400 px?
Opsummering
Enheder til containerforespørgsler (cqw, cqh, cqi, cqb, cqmin, cqmax) angiver størrelser i forhold til forespørgselscontaineren i stedet for viewporten. Brug cqw til flydende typografi, der skalerer med komponentens bredde. De kræver en overordnet container med container-type for at fungere – uden en sådan falder de tilbage til viewport-enheder.
Lær CSS med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 40
- Lektioner
- 159
Ofte stillede spørgsmål
Er lektionen “Enheder til containerforespørgsler: cqw cqh” gratis?
Ja — hele teksten til “Enheder til containerforespørgsler: cqw cqh” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af CSS Academy-kurset, skal du opgradere til CoddyKit PRO. CSS Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Enheder til containerforespørgsler: cqw cqh”?
Tilpas elementers størrelse i forhold til deres containerforespørgsel med cqw, cqh og relaterede containereenheder. Du øver dig i CSS Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på CSS Academy?
Der kræves ingen tidligere erfaring. CSS Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.
Hvor lang tid tager lektionen “Enheder til containerforespørgsler: cqw cqh”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne CSS Academy-lektion?
Ja. Alle CSS Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- container-type og container-name
- @container-regler og brudpunkter
- Enheder til containerforespørgsler: cqw cqh
- Containerforespørgsler kontra media queries