Płynne szerokości z wartościami procentowymi
Wykorzystają Państwo szerokości procentowe do tworzenia układów skalujących się wraz z kontenerem.
Płynne szerokości z wartościami procentowymi to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 2 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.
Dlaczego płynne szerokości?
Układy o stałej szerokości, wyrażonej w pikselach, przestają działać na ekranach węższych niż ustalony rozmiar. Płynne szerokości wykorzystujące wartości procentowe pozwalają układom proporcjonalnie skalować się do rozmiaru dowolnego kontenera lub obszaru widoku.
Podstawy szerokości procentowej
Szerokość procentowa jest względna względem szerokości kontenera nadrzędnego. Element potomny z właściwością width: 50% zawsze będzie miał połowę szerokości elementu nadrzędnego.
<div style="width:300px;border:1px dashed #999;padding:4px;">
<div class="half-width" style="background:#4f8cff22;border:1px solid #4f8cff;">width: 50%</div>
<div class="third-width" style="background:#ffb84d22;border:1px solid #ffb84d;">width: 33.333%</div>
</div>Wartość procentowa a model pudełkowy
Przy ustawieniu box-sizing: border-box szerokości procentowe obejmują dopełnienie i obramowanie. Dzięki temu kolumny o szerokości procentowej są łatwe w użyciu — 50% rzeczywiście oznacza połowę, niezależnie od dopełnienia.
<div style="width:300px;border:1px dashed #999;">
<div class="col-half" style="background:#4f8cff22;border:1px solid #4f8cff;">50% including padding/border</div>
</div>Płynny układ dwukolumnowy
Prosty płynny układ oparty na elementach float (starsze rozwiązanie):
<div style="width:100%;overflow:auto;">
<div class="col" style="background:#4f8cff22;border:1px solid #4f8cff;">Column A</div>
<div class="col" style="background:#ffb84d22;border:1px solid #ffb84d;">Column B</div>
</div>Płynne kolumny we Flexbox
Użycie Flexbox do tworzenia płynnych układów kolumn jest prostsze:
<div class="flex-row">
<div class="col-main" style="background:#4f8cff22;border:1px solid #4f8cff;padding:8px;">Main (flex: 2)</div>
<div class="col-side" style="background:#ffb84d22;border:1px solid #ffb84d;padding:8px;">Side (flex: 1)</div>
</div>Procentowe dopełnienie
Procentowe dopełnienie zawsze jest obliczane względem szerokości elementu nadrzędnego, a nie jego wysokości — dotyczy to również dopełnienia górnego i dolnego. Umożliwia to stosowanie sztuczek z proporcjami:
<div class="video-wrapper" style="background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>Nowoczesne proporcje
Właściwość aspect-ratio zastępuje sztuczkę z dopełnieniem stosowaną do zachowywania proporcji:
<div class="video-wrapper" style="background:linear-gradient(135deg,#4f8cff,#7ee787);"></div>max-width w płynnym układzie
Połączenie szerokości procentowych z max-width zapobiega nadmiernemu zwiększaniu szerokości wierszy na dużych ekranach:
<article class="article" style="background:#4f8cff11;border:1px solid #4f8cff;padding:8px;">Article column — 90% wide, capped at 800px, centered</article>Pułapka związana z wysokością procentową
Procentowa wysokość wymaga, aby element nadrzędny miał określoną wysokość. Jeśli element nadrzędny ma height: auto, procentowa wysokość elementów potomnych również zostanie obliczona jako auto.
Słowa kluczowe rozmiarowania wewnętrznego
Nowoczesny CSS oferuje więcej płynnych opcji określania rozmiaru:
min-content: najmniejszy rozmiar, który mieści treśćmax-content: rozmiar, który mieści całą treść w jednym wierszufit-content: wartość pomiędzy min-content a max-content
<span class="tag" style="background:#4f8cff22;border:1px solid #4f8cff;display:inline-block;">Tag</span>Wzorzec płynnej siatki
Typowa płynna siatka wykorzystująca inline-block (starsze rozwiązanie) lub nowoczesny CSS:
<div class="grid">
<div style="background:#4f8cff22;border:1px solid #4f8cff;min-height:60px;">A</div>
<div style="background:#ffb84d22;border:1px solid #ffb84d;min-height:60px;">B</div>
<div style="background:#7ee78722;border:1px solid #34c759;min-height:60px;">C</div>
</div>Szybkie sprawdzenie
Element nadrzędny ma szerokość 600px. Element podrzędny ma width: 60% i padding: 20px (box-sizing: border-box). Jaka jest szerokość treści elementu podrzędnego?
Podsumowanie
Procentowe szerokości tworzą płynne układy, które skalują się wraz z kontenerem nadrzędnym. Należy łączyć je z max-width, aby zapobiec nadmiernemu rozszerzaniu treści. Do responsywnych multimediów należy używać aspect-ratio. Flexbox i Grid obsługują płynne kolumny bardziej elegancko niż elementy float o szerokości procentowej.
Często zadawane pytania
Czy lekcja „Płynne szerokości z wartościami procentowymi” jest bezpłatna?
Tak — pełny tekst „Płynne szerokości z wartościami procentowymi” 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 „Płynne szerokości z wartościami procentowymi”?
Wykorzystają Państwo szerokości procentowe do tworzenia układów skalujących się wraz z kontenerem. Ć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 2 z 4.
Ile czasu zajmuje lekcja „Płynne szerokości z wartościami procentowymi”?
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
- Podejście mobile-first a desktop-first
- Płynne szerokości z wartościami procentowymi
- Wzorce min-width i max-width
- Responsywne obrazy i element picture