CSS Academy · Lekcja

Funkcje min, max i clamp

Wykorzystają Państwo min(), max() i clamp() do adaptacyjnego ustalania rozmiaru zależnego od wymiarów kontenera lub obszaru widoku.

Funkcje min, max i clamp to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 4 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 funkcje porównawcze CSS?

Funkcje porównawcze CSS pozwalają wyrażać warunkowe rozmiary bez użycia JavaScriptu: „użyj tego rozmiaru, ale nigdy nie mniejszego lub większego niż określone granice”. Są podstawą nowoczesnego, płynnego i responsywnego projektowania.

Funkcja min()

min() zwraca najmniejszą wartość z rozdzielonej przecinkami listy wartości. Przeglądarka wybiera wartość, która jest najmniejsza przy bieżącym rozmiarze obszaru widoku.

<div class="container">Container width: min(800px, 90%)</div>

Funkcja max()

max() zwraca największą wartość. Jest przydatna do ustawiania minimalnych rozmiarów, które mogą się również zwiększać.

<p>Text sized with max(1rem, 2vw)</p>

Funkcja clamp()

clamp(min, preferred, max) ogranicza wartość do zakresu między minimum a maksimum. Preferowana wartość jest zwykle płynna (np. vw).

<h1>Clamped Heading</h1>

clamp() dla płynnej typografii

Płynna typografia z użyciem clamp() eliminuje potrzebę stosowania wielu nadpisań rozmiaru czcionki w zapytaniach medialnych:

<h1>Main Heading</h1>
  <h2>Subheading</h2>
  <p>Body copy that scales fluidly with the viewport.</p>

clamp() dla płynnych odstępów

Ten sam wzorzec można zastosować do odstępów, aby uzyskać naturalnie responsywne marginesy i dopełnienia:

<div class="section">Section with fluid padding</div>

min() dla kontenerów

Bezpieczny wzorzec kontenera, który nigdy nie przekracza wartości max-width i nie powoduje poziomego przewijania:

<div class="wrapper">Safe wrapper container</div>

Zagnieżdżanie funkcji

Funkcje porównujące można zagnieżdżać, aby tworzyć złożone wyrażenia:

<p class="hero-text">Nested min/max inside clamp()</p>

calc() w połączeniu z clamp()

Użyj calc() wewnątrz clamp(), aby precyzyjnie interpolować płynne przejście między dwoma rozmiarami:

<h1>Precise fluid heading</h1>

min-content max-content fit-content

CSS oferuje również słowne wartości rozmiaru:

min-content: najmniejszy możliwy rozmiar bez przepełnienia
max-content: zajmuje tyle miejsca, ile potrzebuje zawartość
fit-content(): działa jak max-content, ale jest ograniczona do podanego limitu

<span class="tag">Tag label</span>

Obsługa przez przeglądarki

Wartości min(), max() i clamp() są obsługiwane przez wszystkie nowoczesne przeglądarki. Nie są potrzebne żadne prefiksy. Można ich używać wszędzie tam, gdzie oczekiwana jest wartość długości, częstotliwości, czasu lub liczby.

Szybkie sprawdzenie

Nagłówek używa font-size: clamp(1rem, 4vw, 3rem) w widoku o szerokości 600px. Jaki będzie rozmiar czcionki?

Podsumowanie

min() wybiera najmniejszą wartość, a max() — największą. clamp(min, preferred, max) ogranicza płynną wartość do określonego zakresu. Funkcje te umożliwiają tworzenie nowoczesnej płynnej typografii i odstępów, często eliminując potrzebę stosowania wielu nadpisań w zapytaniach medialnych.

Często zadawane pytania

Czy lekcja „Funkcje min, max i clamp” jest bezpłatna?

Tak — pełny tekst „Funkcje min, max i clamp” 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 „Funkcje min, max i clamp”?

Wykorzystają Państwo min(), max() i clamp() do adaptacyjnego ustalania rozmiaru zależnego od wymiarów kontenera lub obszaru widoku. Ć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 4 z 4.

Ile czasu zajmuje lekcja „Funkcje min, max i clamp”?

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

← Powrót do CSS Academy