CSS Academy · Lekcja

Jednostki względne: em i rem

Ustawią Państwo rozmiar elementów względem rozmiaru czcionki elementu nadrzędnego lub głównego, korzystając z jednostek em i rem.

Jednostki względne: em i rem 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.

Czym są jednostki względne?

Jednostki względne są skalowane na podstawie innego pomiaru — zwykle rozmiaru czcionki elementu lub elementu głównego. Umożliwiają tworzenie skalowalnych, responsywnych projektów, które uwzględniają ustawienia użytkownika.

em — względem rozmiaru czcionki elementu nadrzędnego

em jest względne względem rozmiaru czcionki bieżącego elementu (w przypadku samej właściwości font-size) lub elementu nadrzędnego (w przypadku innych właściwości). Może to powodować kumulowanie wartości.

<div class="parent">
    Parent (20px)
    <div class="child">
      Child (1.5em = 30px)
      <div class="grandchild">Grandchild (1.5em = 45px!)</div>
    </div>
  </div>

em w odstępach

Gdy em jest używane dla właściwości padding, margin lub border-radius, jest względne względem rozmiaru czcionki danego elementu. Dzięki temu komponenty skalują się proporcjonalnie.

<button class="button">Padded Button</button>

rem — względem rozmiaru czcionki elementu głównego

rem (em elementu głównego) jest względne względem rozmiaru czcionki elementu głównego (html). Nigdy nie kumuluje wartości i zapewnia przewidywalne działanie w całej stronie.

<h1>Heading (2.5rem = 40px)</h1>
  <p>Paragraph text (1rem = 16px)</p>
  <small>Small print (0.75rem = 12px)</small>

rem a dostępność użytkownika

Jeśli użytkownik zwiększy bazowy rozmiar czcionki w przeglądarce (np. z 16px do 20px, aby poprawić czytelność), jednostki rem odpowiednio się przeskalują. Stałe jednostki px tego nie zrobią. Dlatego zdecydowanie zaleca się używanie rem w typografii.

Rozmiar czcionki html w procentach

Ustaw rozmiar czcionki elementu głównego jako wartość procentową, aby uwzględnić ustawienia użytkownika w przeglądarce:

<p>Root font-size respects the browser/user default (100%).</p>

Wybór między em a rem

Praktyczne wskazówki:

Używaj rem do rozmiarów czcionek, tokenów odstępów i wymiarów układu
Używaj em do wewnętrznych odstępów komponentu, które powinny skalować się wraz z rozmiarem czcionki komponentu (np. paddingu przycisku)

em w zapytaniach o media

Zapytania o media określone w em reagują na zmiany rozmiaru czcionki w przeglądarce. Punkt przerwania 48em = 768px przy ustawieniach domyślnych, ale dostosowuje się, jeśli użytkownik zmienił bazowy rozmiar czcionki.

<div class="layout">
    <div>Column A</div>
    <div>Column B</div>
  </div>

Obliczanie em

Wzór: desired px / parent px = em value. Jeśli element nadrzędny ma 16px, a tekst ma mieć 24px: 24/16 = 1.5em.

<h2>Heading (24px via 1.5rem)</h2>
  <p>Paragraph (18px via 1.125rem)</p>

Problem kumulowania em

Zagnieżdżanie elementów z rozmiarem określonym w em powoduje multiplikatywne kumulowanie rozmiaru czcionki. Dlatego do określania rozmiaru czcionki preferuje się rem — zawsze odwołuje się ono do elementu głównego i zapobiega kumulowaniu.

ch — szerokość znaku

Jednostka ch odpowiada szerokości znaku „0” w bieżącej czcionce. Jest przydatna do ograniczania szerokości kontenerów tekstu w celu zachowania czytelnej długości wierszy:

<p class="article-body">This paragraph is constrained to about 70 characters per line using the ch unit, which keeps text at a comfortable, readable line length regardless of font size.</p>

Szybkie sprawdzenie

Przycisk ma font-size: 1.25rem oraz padding: 0.5em. Jeśli bazowy rozmiar czcionki wynosi 16px, ile pikseli ma padding?

Podsumowanie

em skaluje się względem rozmiaru czcionki bieżącego elementu (lub elementu nadrzędnego w przypadku samej właściwości font-size) — wartości mogą się kumulować. rem zawsze skaluje się względem elementu głównego i nigdy nie kumuluje wartości. Używaj rem w typografii i globalnych odstępach, a em do proporcjonalnych wewnętrznych odstępów komponentów.

Często zadawane pytania

Czy lekcja „Jednostki względne: em i rem” jest bezpłatna?

Tak — pełny tekst „Jednostki względne: em i rem” 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 względne: em i rem”?

Ustawią Państwo rozmiar elementów względem rozmiaru czcionki elementu nadrzędnego lub głównego, korzystając z jednostek em i rem. Ć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 „Jednostki względne: em i rem”?

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