Jednostki miary i rozmiaru (px, em, rem, %)

W CSS jednostki miary i rozmiaru odgrywają kluczową rolę w definiowaniu wyglądu elementów na stronie. Właściwe zrozumienie różnych jednostek pozwala na precyzyjne projektowanie responsywnych i elastycznych layoutów. Najczęściej stosowane jednostki to px, em, rem oraz %.

Piksele (px)

Piksel jest najczęściej używaną jednostką w CSS i reprezentuje najmniejszy punkt na ekranie. Wartość w pikselach określa stały rozmiar, niezależny od ustawień przeglądarki czy urządzenia.

/* W tym przykładzie rozmiar tekstu w paragrafie będzie zawsze wynosił 16 pikseli, niezależnie od innych ustawień. */

p {
    font-size: 16px;
}

Em

Em to jednostka względna, która zależy od rozmiaru czcionki elementu nadrzędnego. Jeden em równa się aktualnemu rozmiarowi czcionki.

Jeśli domyślny rozmiar czcionki wynosi 16px, to tekst w paragrafie będzie miał 1.5 raza większy rozmiar, czyli 24px.

Zastosowanie em

• Stosowany do skalowania elementów względem rozmiaru czcionki rodzica.
• Przydatny w przypadku dynamicznego zwiększania lub zmniejszania elementów.

p {
    font-size: 1.5em;
}

Rem

Rem (Root Em) jest jednostką względną, ale w przeciwieństwie do em, odnosi się do rozmiaru czcionki elementu głównego (html), a nie rodzica.

Jeśli rozmiar czcionki dla elementu html wynosi 16px, to tekst w paragrafie będzie miał 32px (2 × 16px).

Zastosowanie Rem

• Rem jest bardziej przewidywalny niż em, ponieważ zawsze odnosi się do głównego rozmiaru czcionki, co sprawia, że jest łatwiejszy do kontrolowania w większych projektach.
• Często używany w responsywnych layoutach, gdzie rozmiar czcionki może być zmieniany na poziomie całej strony.

Procenty (%)

Procenty to jednostka względna, która w kontekście czcionki odnosi się do rozmiaru czcionki elementu nadrzędnego. Procentowa wartość określa, jak duża ma być czcionka w stosunku do czcionki rodzica.

Jeśli rozmiar czcionki w elemencie nadrzędnym (np. body) wynosi 16px, to paragraf p będzie miał czcionkę o rozmiarze 150% z tej wartości, czyli 24px.

Zastosowanie procentów (%)

• Procenty są przydatne do dynamicznego skalowania czcionek w zależności od rozmiaru nadrzędnych elementów.
• Używane, gdy chcemy zachować proporcje w stosunku do większej hierarchii layoutu.

span {
    font-size: 2rem;
}

p {
    font-size: 150%;
}

Porównanie jednostek

• px - Stała jednostka, niezależna od rodzica - Precyzyjne, sztywne układy
• em - Względna wobec rozmiaru czcionki rodzica - Dynamiczne układy zależne od rodzica
• rem - Względna wobec rozmiaru czcionki głównej - Skalowalność globalna, łatwa do kontrolowania
• % - Względna wobec rozmiaru rodzica - Responsywne szerokości i wysokości

Podsumowanie

Zrozumienie różnicy między jednostkami px, em, rem i % pozwala na bardziej precyzyjne projektowanie stron internetowych, które są zarówno elastyczne, jak i responsywne. Użycie odpowiednich jednostek w zależności od kontekstu pozwala tworzyć layouty, które wyglądają dobrze na różnych urządzeniach i w różnych rozdzielczościach.