Konwerter jednostek CSS
⚙️ Ustawienia bazowe
Domyślnie: 16px (ustawienie przeglądarki)
Do obliczeń em
Do obliczeń %
🔄 Konwerter jednostek
Jednostka bezwzględna — stały rozmiar niezależnie od ustawień
Względem rozmiaru czcionki elementu root (html)
Względem rozmiaru czcionki elementu nadrzędnego
Względem szerokości/rozmiaru czcionki elementu nadrzędnego
Jednostka druku: 1pt = 1/72 cala
1vw = 1% szerokości viewportu (domyślnie 1920px)
📊 Szybka tabela konwersji
| PX | REM | EM | % | PT | Typowe użycie |
|---|
💡 Dobre praktyki
👍 Używaj REM do:
- • Rozmiarów czcionek (skaluje się z preferencjami użytkownika)
- • Paddingu i marginesów (spójne odstępy)
- • Breakpointów media query
- • Wymiarów komponentów
👍 Używaj EM do:
- • Paddingu przycisków (skaluje się z czcionką)
- • Wysokości linii
- • Rozmiarów ikon względem tekstu
- • Odstępów typograficznych
👍 Używaj PX do:
- • Obramowań (dokładnie 1px, 2px)
- • Cieni (box-shadow)
- • Drobnych precyzyjnych korekt
- • Obrazów/ikon o stałym rozmiarze
👍 Używaj % do:
- • Szerokości i wysokości (płynne layouty)
- • Responsywnych kontenerów
- • Kolumn siatki
- • Proporcji (aspect ratio)
Konwerter jednostek CSS - kalkulator px, rem, em, %
🎨 Konwertuj między jednostkami CSS: piksele (px), rem, em, procenty (%), punkty (pt) oraz jednostki viewport (vw, vh). Niezbędne narzędzie do responsywnego projektowania i tworzenia stron.
Typy jednostek CSS
- Jednostki bezwzględne: px, pt, cm, mm, in - stały rozmiar niezależnie od kontekstu
- Jednostki względne: rem, em, %, vw, vh - skalują się względem rodzica lub viewportu
- Względem czcionki: rem, em, ch, ex - oparte o rozmiar czcionki
- Względem viewportu: vw, vh, vmin, vmax - oparte o wymiary viewportu
Wyjaśnienie jednostek
- px (piksele): 1px = 1 piksel urządzenia. Jednostka bezwzględna, precyzyjna, ale nieskalowalna.
- rem: Względem elementu root (html). Domyślnie 1rem = 16px.
- em: Względem rozmiaru czcionki rodzica. Może się kumulować w zagnieżdżeniach.
- %: Względem właściwości elementu nadrzędnego. 100% = tyle co rodzic.
- pt (punkty): Jednostka druku. 1pt = 1/72 cala ≈ 1.333px.
- vw: 1vw = 1% szerokości viewportu. 100vw = pełna szerokość.
- vh: 1vh = 1% wysokości viewportu. 100vh = pełna wysokość.
Popularne konwersje
- 1rem = 16px (domyślne ustawienie przeglądarki)
- 1em = 16px (jeśli rodzic ma 16px)
- 100% = rozmiar elementu nadrzędnego
- 12pt = 16px (często w druku)
- 1vw = 19.2px (dla viewportu 1920px)
Metoda 62,5%
Ustaw html { font-size: 62.5%; }
aby 1rem = 10px. To upraszcza obliczenia: 1.6rem = 16px, 2.4rem = 24px itd.
Aspekty dostępności
- Używaj rem dla czcionek: respektuje preferencje użytkownika w przeglądarce
- Unikaj px dla czcionek: nie skaluje się z ustawieniami użytkownika
- Stosuj jednostki względne: poprawia dostępność przy zoomie/powiększaniu
- Testuj różne rozmiary: sprawdź 200% zoom i ustawienia dużego tekstu
Responsive Design
Używaj rem w media queries: @media (min-width: 48rem)
zamiast 768px. Dzięki temu breakpointy
skalują się wraz z preferencjami rozmiaru czcionki użytkownika.
💡 Pro tip: Nowoczesna praktyka to używanie rem do większości rozmiarów (czcionki, odstępy, breakpointy), px do obramowań i drobnych detali oraz % lub jednostek viewport do layoutów. Unikaj em dla odstępów, bo może się kumulować.
Asted Cloud
Komentarze (0)
Podziel się swoją opinią — prosimy o uprzejmość i trzymanie się tematu.
Zaloguj się, aby komentować