Czym jest Konwerter Jednostek CSS?
CSS obsługuje kilka różnych jednostek rozmiaru — bezwzględne, takie jak px i pt, oraz względne, takie jak rem, em, vw, vh i %. Jednostki względne są niezbędne dla responsywnego, dostępnego projektowania (rem w szczególności respektuje preferencje rozmiaru czcionki przeglądarki użytkownika), ale przeliczanie ich w głowie jest naprawdę trudne, ponieważ wynik zależy od kontekstu: głównego rozmiaru czcionki, rozmiaru czcionki bieżącego elementu lub wymiarów viewportu.
Ten konwerter wykonuje te obliczenia za Ciebie: ustaw bazowy rozmiar czcionki, wymiary viewportu i wartość, którą przeliczasz, a zobaczysz odpowiadającą jej wartość w każdej innej jednostce natychmiast — przydatne do tłumaczenia pikselowych wymiarów makiety projektu na responsywne wartości rem/vw lub do ponownego sprawdzenia, jak dana reguła CSS faktycznie renderuje się na ekranie.
Kiedy używać tego kalkulatora
- Gdy musisz ocenić koszty narzędzia przed rozpoczęciem projektu
- Gdy porównujesz wyniki z podobnymi narzędziami
- Gdy uczysz się używać narzędzia w różnych scenariuszach
- Gdy dzielisz się wynikami z zespołem lub klientami
- Gdy weryfikujesz dokładność obliczeń narzędzia
- Gdy szukasz szybkiego i prostego sposobu na rozwiązanie konkretnego problemu
Kroki:
- Wprowadź wartość, którą chcesz przeliczyć, i wybierz jej jednostkę początkową.
- Ustaw swój bazowy rozmiar czcionki (domyślnie standard przeglądarki 16px).
- Dla przeliczeń vw/vh wprowadź docelową szerokość i wysokość viewportu.
- Odczytaj odpowiadającą wartość w każdej innej jednostce natychmiast.
Wzór
1rem = 1em = bazowy rozmiar czcionki (domyślnie 16px)
1pt = 96/72 px ≈ 1,333px
1vw = szerokość viewportu / 100
1vh = wysokość viewportu / 100
1% = wartość referencyjna / 100
Przypadki użycia
- Przeliczanie pikselowej specyfikacji projektanta z Figma/Sketch na wartości rem dla dostępnego CSS
- Sprawdzanie, jak faktycznie renderuje się responsywny rozmiar czcionki oparty na vw przy określonej szerokości ekranu
- Tłumaczenie starszego CSS opartego na pt (druk lub e-mail) na standardowy dla sieci px lub rem
- Audytowanie, czy skala odstępów systemu projektowego zgadza się między jednostkami
- Szybkie sprawdzanie wartości CSS podczas przeglądu kodu bez otwierania narzędzi deweloperskich
Kluczowe korzyści
- Przelicza między wszystkimi 7 popularnymi jednostkami CSS w jednym miejscu
- Używa Twojego rzeczywistego bazowego rozmiaru czcionki i viewportu, a nie stałego założenia
- Natychmiastowe wyniki podczas pisania — bez potrzeby otwierania narzędzi deweloperskich przeglądarki
- Darmowe, bez rejestracji, działa całkowicie w Twojej przeglądarce
Wskazówki
- Preferuj rem zamiast em dla rozmiarów czcionek, aby uniknąć nieoczekiwanej kumulacji w zagnieżdżonych komponentach
- Używaj dvh/svh zamiast vh dla mobilnych układów pełnoekranowych, jeśli Twoje docelowe przeglądarki to obsługują
- Utrzymuj spójny bazowy rozmiar czcionki w całym systemie projektowym, aby przeliczenia rem pozostały przewidywalne
- Podczas tłumaczenia projektu pixel-perfect przeliczaj odstępy na rem, ale zachowuj grubości obramowań i inne drobne szczegóły w px
Częste błędy
- Zakładanie, że 1rem zawsze równa się 16px, bez sprawdzenia, czy główny rozmiar czcionki został zmieniony
- Używanie vh dla mobilnych układów pełnej wysokości bez uwzględnienia zachowania paska adresu przeglądarki
- Zagnieżdżanie rozmiarów czcionek opartych na em i zaskoczenie, gdy nieoczekiwanie się kumulują
- Niespójne mieszanie px i rem w tym samym komponencie, co psuje skalowanie dostępności
Kluczowe pojęcia
- Główny rozmiar czcionki: Rozmiar czcionki ustawiony na elemencie html, wobec którego względne są wszystkie jednostki rem
- Viewport: Widoczny obszar strony internetowej w oknie przeglądarki
- Jednostka bezwzględna: Jednostka taka jak px lub pt o stałym rzeczywistym rozmiarze, niezależna od jakiegokolwiek kontekstu
- Jednostka względna: Jednostka taka jak rem, em, vw lub %, której rozmiar zależy od innej wartości
Powiązane pojęcia
- Konwerter kolorów: Przeliczaj między formatami kolorów HEX, RGB i HSL
- Konwerter długości: Przeliczaj między calami, centymetrami, pikselami i innymi
- Konwerter jednostek: Przeliczaj między różnymi jednostkami miary
- Kalkulator proporcji obrazu: Obliczaj i przeliczaj proporcje obrazu
- Konwerter danych: Przeliczaj między bajtami, KB, MB, GB i TB
Przykład
Przy bazowym rozmiarze czcionki 16px, 1,5rem przelicza się na 24px. Przy szerokości viewportu 1440px, 5vw przelicza się na 72px.
Interpretacja wyników
To narzędzie wyświetla szczegółowe wyniki na podstawie wprowadzonych przez Ciebie danych. Przeanalizuj uważnie każdą sekcję, aby zrozumieć, jak interpretować liczby i podejmować na ich podstawie decyzje.
Jeśli masz pytania dotyczące działania narzędzia lub interpretacji konkretnych wyników, zapoznaj się z sekcją FAQ poniżej lub skontaktuj się z pomocą techniczną.