wtorek,
CSS: Jednostki
W CSS dostępne są różne jednostki, które służą do określania wielkości, odległości, rozmiarów czcionek i innych właściwości elementów. W materiale znajdziesz przegląd głównych typów jednostek stosowanych w kaskadowych arkuszach stylów.
Jednostki absolutne
- Pixels (px): Najczęściej używana jednostka, 1 px jest zazwyczaj równy jednemu pikselowi na ekranie.
- Points (pt): Tradycyjnie używane w druku, 1 pt wynosi 1/72 cala.
- Picas (pc): Również używane w druku, 1 pica to około 1/6 cala.
- Inches (in): Cal, standardowa jednostka długości.
- Centimeters (cm): Jednostka metryczna, 1 cm to 1/100 metra.
- Millimeters (mm): 1 mm to 1/10 cm.
Jednostki relatywne
- Percentages (%): Wartość procentowa jest relatywna do innej wartości, na przykład szerokości kontenera rodzica.
- Ems (em): Relatywna do wielkości czcionki elementu nadrzędnego. 1 em to równowartość bieżącej wielkości czcionki.
- Rems (rem): Podobna do em, ale relatywna do wielkości czcionki elementu głównego (<html>).
- Viewport Width (vw): 1 vw to 1% szerokości obszaru roboczego przeglądarki.
- Viewport Height (vh): 1 vh to 1% wysokości obszaru roboczego przeglądarki.
- Viewport Minimum/Maximum (vmin/vmax): vmin to mniejsza wartość z vw i vh, vmax to większa wartość.
Mniej popularne jednostki
- Ex: Relatywna do wysokości małej litery 'x' w używanej czcionce.
- Ch: Relatywna do szerokości znaku '0' (zero) w używanej czcionce.
Podsumowanie
Jednostki relatywne, takie jak em, rem, vw, i vh, są bardzo przydatne w projektowaniu responsywnym, ponieważ pozwalają na lepsze skalowanie elementów w zależności od rozmiaru ekranu lub rodzicielskich elementów. Jednostki absolutne, takie jak px czy cm, są z kolei użyteczne, gdy wymagane są konkretne wymiary, które nie powinny się zmieniać niezależnie od kontekstu. Wybór odpowiedniej jednostki zależy od projektu i wymagań dotyczących układu i designu.
