calc i clamp — CSS

calc() pozwala wykonywać obliczenia na jednostkach CSS.

Cel lekcji

Poznać zagadnienie „calc i clamp”, zrozumieć przykład i umieć zastosować podobny zapis we własnym programie.

Wyjaśnienie krok po kroku

clamp(min, preferowana, max) ogranicza wartość w zadanym przedziale, np. rozmiar tekstu.

Najpierw przeanalizuj kod bez uruchamiania. Zwróć uwagę, jakie dane wykorzystuje program, co z nimi robi i skąd bierze się wynik pokazany pod przykładem.

Praktyczny przykład

Gdzie zobaczysz efekt: Wygląd strony w przeglądarce

h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
.box { width: calc(100% - 2rem); }

Przeczytaj kod linijka po linijce

h1 { font-size: clamp(1.5rem, 4vw, 3rem); }Określamy rozmiar lub czytelność tekstu.
.box { width: calc(100% - 2rem); }Kontrolujemy wymiary elementu.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Nagłówek skaluje się w zakresie 1.5–3rem, pudełko ma szerokość minus 2rem.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Jak utrwalić tę umiejętność?

Przepisz kod samodzielnie. Następnie zmień jedną wartość lub jedną instrukcję i spróbuj przewidzieć efekt. Dopiero potem uruchom zmienioną wersję. Jeśli wynik jest inny niż oczekiwany, porównaj kolejne linie.

Spróbuj samodzielnie

Ustaw padding karty przez clamp.