Jednostki zapytań kontenera: cqw cqh
Ustalaj rozmiar elementów względem ich kontenera zapytań, używając cqw, cqh i powiązanych jednostek kontenera.
Jednostki zapytań kontenera: cqw cqh to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.
Jednostki zapytań kontenera
CSS udostępnia jednostki zależne od kontenera, które określają wartości jako procent wymiarów kontenera zapytania — podobnie jak jednostki viewportu (vw/vh), ale względem kontenera komponentu.
cqw — szerokość zapytania kontenera
1cqw = 1% wymiaru inline kontenera (szerokości przy poziomym kierunku pisma). Proszę skalować typografię i odstępy względem kontenera komponentu.
<div class="card-wrapper"><h3 class="card-title">Fluid Card Title</h3></div>
cqh — wysokość zapytania kontenera
1cqh = 1% wymiaru blokowego kontenera (wysokości). Wymaga container-type: size, a nie tylko inline-size.
<div class="hero-wrapper"><div class="hero-card">Hero Text</div></div>
cqi — wymiar inline kontenera
cqi jest aliasem cqw przy poziomym kierunku pisma — odnosi się konkretnie do wymiaru inline, a nie do wymiaru związanego z kierunkiem poziomym.
cqb — wymiar blokowy kontenera
cqb działa podobnie jak cqh, ale jest zależne od wymiaru — odnosi się do rozmiaru blokowego niezależnie od trybu pisma.
cqmin i cqmax
cqmin = 1% mniejszego wymiaru kontenera. cqmax = 1% większego wymiaru. Działają analogicznie do vmin/vmax.
<div class="icon-wrapper"><div class="icon"></div></div>
Płynna typografia komponentów
Jednostki kontenera umożliwiają tworzenie prawdziwie płynnej typografii przypisanej do komponentu:
<div class="card-wrapper"><h3 class="card-title">Fluid Title</h3></div>
Kiedy używać jednostek kontenera
Jednostek kontenera należy używać, gdy:
- tekst komponentu powinien skalować się wraz z jego szerokością
- odstępy wewnątrz komponentu powinny być proporcjonalne do jego rozmiaru
- potrzebny jest płynny projekt na poziomie komponentu, niezależny od viewportu
Jednostki kontenera a jednostki viewportu
Kluczowa różnica polega na tym, że jednostki viewportu (vw, vh) odnoszą się do viewportu przeglądarki, a jednostki kontenera (cqw, cqh) do najbliższego kontenera zapytania. Dzięki temu komponenty są naprawdę przenośne — ten sam komponent wygląda proporcjonalnie poprawnie zarówno na pasku bocznym o szerokości 300px, jak i w głównym obszarze o szerokości 900px.
Wymagane: container-type
Jednostki kontenera działają tylko wtedy, gdy istnieje przodek z właściwością container-type. Bez niego jednostka zapytania kontenera powraca do małej jednostki viewportu (svw/svh).
Praktyczny wzorzec
Kompletny komponent wykorzystujący jednostki kontenera:
<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>
Szybkie sprawdzenie
Jaki efekt daje font-size: 5cqw w komponencie znajdującym się w kontenerze o szerokości 400px?
Podsumowanie
Jednostki zapytań kontenera (cqw, cqh, cqi, cqb, cqmin, cqmax) określają wartości względem kontenera zapytania, a nie viewportu. Proszę używać cqw do tworzenia płynnej typografii skalującej się wraz z szerokością komponentu. Do działania wymagają przodka z właściwością container-type — bez niego przechodzą na jednostki viewportu.
Często zadawane pytania
Czy lekcja „Jednostki zapytań kontenera: cqw cqh” jest bezpłatna?
Tak — pełny tekst „Jednostki zapytań kontenera: cqw cqh” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Jednostki zapytań kontenera: cqw cqh”?
Ustalaj rozmiar elementów względem ich kontenera zapytań, używając cqw, cqh i powiązanych jednostek kontenera. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć CSS Academy?
Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.
Ile czasu zajmuje lekcja „Jednostki zapytań kontenera: cqw cqh”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?
Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- container-type i container-name
- Reguły @container i punkty przerwania
- Jednostki zapytań kontenera: cqw cqh
- Zapytania kontenera a zapytania medialne