Jednostki — CSS

CSS pozwala wyrażać rozmiary na różne sposoby.

Jak to działa?

rem zależy od rozmiaru pisma elementu głównego, em od kontekstu wielkości fontu, % jest względny, a vw odnosi się do szerokości okna. clamp() pozwala ustawić wartości elastyczne.

Przykład 1 — poznaj zapis

.title {
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  line-height: 1.1;
}

Nagłówek rośnie wraz z oknem, ale ma określone minimum i maksimum.

Przeczytaj kod linijka po linijce

.title {Wybieramy elementy, które mają otrzymać podane style.
font-size: clamp(1.8rem, 4vw, 3.2rem);Określamy rozmiar lub czytelność tekstu.
line-height: 1.1;Określamy rozmiar lub czytelność tekstu.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Wielkość nagłówka płynnie reaguje na szerokość okna.

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

Przykład 2 — podobny problem, inne dane

Teraz przyjrzyj się drugiemu przykładowi. Zwróć uwagę na to, co zmieniło się w kodzie, a co w wyniku. Spróbuj przewidzieć rezultat przed przeczytaniem odpowiedzi.

p { font-size: 1.25rem; margin-bottom: 1em; }

Wynik drugiego przykładupo uruchomieniu przykładu

Odstęp pod akapitem skaluje się wraz z jego font-size.

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

Sprawdź, czy rozumiesz

Wróć do pierwszego przykładu, zmień jedną wartość i spróbuj samodzielnie przewidzieć wynik. Następnie uruchom kod i porównaj rezultat. W ten sposób nauczysz się nie tylko przepisywać instrukcje, ale rozumieć ich działanie.

Spróbuj samodzielnie

Zastosuj rem zamiast px do odstępów.