Przelicznik jednostek CSS
Przeliczanie px, rem, em, vw, vh i innych jednostek CSS
Ustawienia i dane wejściowe
Szybkie ustawienia i przykłady
Działa w przeglądarce. Wprowadzone dane pozostają na tym urządzeniu.
Wyniki
Wprowadź wartości, aby zobaczyć wyniki.
Informacje źródłowe i szczegóły obliczeń
O bezpłatnym przeliczniku jednostek CSS
Bezpłatny przelicznik jednostek CSS to kompletne narzędzie dla programistów stron i projektantów, które od razu przelicza wszystkie główne jednostki długości w CSS. Niezależnie od tego, czy trzeba zamienić piksele na rem, em na wartości procentowe, czy jednostki viewportu na jednostki bezwzględne, narzędzie dokładnie i na bieżąco przelicza jednocześnie 10 różnych jednostek CSS.
Zrozumienie i poprawne stosowanie jednostek CSS to podstawa responsywnych i dostępnych stron. Jednostki względne, takie jak rem i em, skalują się razem z ustawieniami rozmiaru czcionki, dzięki czemu układ dostosowuje się do preferencji użytkownika i potrzeb dostępności. Jednostki viewportu (vw, vh) pozwalają tworzyć płynne projekty reagujące na rozmiar ekranu. Jednostki bezwzględne (px, pt, cm, mm, in) dają stałe wymiary, gdy potrzebna jest precyzyjna kontrola.
To narzędzie do przeliczania jednostek CSS to coś więcej niż prosty kalkulator: pozwala ustawić bazowy rozmiar czcionki do obliczeń rem/em/% oraz wymiary viewportu do przeliczeń vw/vh. Wyniki dla wszystkich 10 jednostek są wyświetlane w czytelnej siatce, z kopiowaniem jednym kliknięciem i natychmiastową zamianą jednostek, więc to najszybszy sposób na znalezienie właściwej wartości CSS w każdym projekcie.
Najważniejsze funkcje
- Konwersja między 10 jednostkami CSS: px, rem, em, %, vw, vh, pt, cm, mm i in
- Wszystkie przeliczenia wyświetlane jednocześnie w responsywnej siatce
- Konfigurowalny bazowy rozmiar czcionki dla dokładnych obliczeń rem, em i procentów
- Konfigurowalna szerokość i wysokość viewportu dla precyzyjnych przeliczeń vw i vh
- Kopiowanie do schowka jednym kliknięciem, razem z symbolem jednostki
- Natychmiastowa zamiana jednostek, by ustawić dowolną przeliczoną wartość jako nowe źródło
- Gotowe ustawienia dla typowych wartości, takich jak 1rem, 100vw, 50% i standardowe rozmiary czcionek
- Opisy jednostek pokazujące, co oznacza każda jednostka CSS
- Inteligentne formatowanie liczb z odpowiednią precyzją dziesiętną
- Tryb ciemny, wygodny w każdym środowisku pracy z kodem
Jak korzystać z przelicznika jednostek CSS
- Wpisz wartość: w polu wejściowym u góry narzędzia wpisz wartość liczbową do przeliczenia.
- Wybierz jednostkę źródłową: w menu rozwijanym wybierz jednostkę CSS wpisanej wartości (px, rem, em, %, vw, vh, pt, cm, mm lub in).
- W razie potrzeby zmień ustawienia: dostosuj bazowy rozmiar czcionki (domyślnie 16px) i wymiary viewportu (domyślnie 1920x1080) do konfiguracji projektu.
- Zobacz wszystkie przeliczenia: przeliczenia na wszystkie 10 jednostek są od razu widoczne w siatce poniżej. Jednostka źródłowa jest wyróżniona na niebiesko, by łatwo ją znaleźć.
- Kopiuj lub zamieniaj: kliknij ikonę kopiowania, aby skopiować dowolną przeliczoną wartość razem z jednostką, albo ikonę zamiany, aby ustawić tę wartość jako nowe źródło dalszych przeliczeń.
Zastosowania
- Projektowanie responsywne: projekty oparte na pikselach z Figmy lub Sketcha można przeliczyć na jednostki rem i em, aby uzyskać skalowalne, dostępne układy CSS.
- Zgodność z wymogami dostępności: zamień stałe wartości px na względne jednostki rem/em, aby układ uwzględniał preferowany przez użytkownika rozmiar czcionki i wytyczne WCAG.
- Układy oparte na viewporcie: dokładne wartości vw i vh dla sekcji na pełnym ekranie, responsywnej typografii i płynnych odstępów.
- Tworzenie arkuszy stylów do druku: jednostki ekranowe można zamienić na przyjazne drukowi wartości pt, cm, mm i in do arkuszy CSS @media print.
- Rozwój systemu projektowego: spójne skale odstępów i typografii powstają dzięki przeliczaniu między systemami jednostek w tokenach projektowych.
- Migracja frameworka CSS: przeliczanie między systemami jednostek przy przechodzeniu z jednego frameworka lub metodyki CSS na inną.
- Rozwój wieloplatformowy: spójne rozmiary w aplikacjach webowych, mobilnych stronach i aplikacjach hybrydowych dzięki przeliczaniu jednostek specyficznych dla platform.
Najczęściej zadawane pytania
Czy to narzędzie jest darmowe?
Tak, przelicznik jednostek CSS jest całkowicie bezpłatny. Nie ma limitów użycia, nie trzeba zakładać konta ani korzystać z płatnych funkcji. Można przeliczyć dowolnie wiele wartości.
Czy moje dane są bezpieczne?
Oczywiście. Wszystkie przeliczenia są wykonywane w całości w przeglądarce za pomocą JavaScriptu. Żadne dane nie są wysyłane na serwer. Po załadowaniu strony narzędzie działa całkowicie offline.
Dlaczego trzeba ustawić bazowy rozmiar czcionki?
Jednostki względne, takie jak rem, em i %, zależą od odniesienia, jakim jest rozmiar czcionki. W większości przeglądarek domyślnie jest to 16px, ale w projekcie może obowiązywać inna wartość bazowa. Ustawienie właściwego bazowego rozmiaru czcionki zapewnia dokładne przeliczenia dla konfiguracji konkretnego projektu.
Czym różni się rem od em?
Obie jednostki, rem i em, są względne wobec rozmiaru czcionki, ale rem odnosi się zawsze do rozmiaru czcionki elementu głównego (html), a em do rozmiaru czcionki elementu nadrzędnego. W tym przeliczniku obie korzystają z ustawienia bazowego rozmiaru czcionki, ponieważ konkretny kontekst DOM nie jest dostępny.
Jak oblicza się jednostki viewportu?
1vw to 1% szerokości viewportu, a 1vh to 1% wysokości viewportu. Przelicznik oblicza te wartości na podstawie ustawionych wymiarów viewportu (domyślnie 1920x1080). Aby uzyskać dokładne wyniki, dopasuj ustawienia do rozmiaru docelowego ekranu.
Jak działa przeliczanie px na pt?
Przeliczenie opiera się na standardowym stosunku 96 pikseli CSS na cal i 72 punktów na cal. Dlatego 1pt to w przybliżeniu 1,333px (96/72). Ten stosunek jest taki sam we wszystkich nowoczesnych przeglądarkach i systemach operacyjnych.
Wskazówki i dobre praktyki
- Używaj rem do typografii: ustaw bazowy rozmiar czcionki w elemencie html i stosuj jednostki rem do wszystkich rozmiarów tekstu, aby typografia była spójna i dostępna w całym serwisie.
- Wybieraj jednostki względne: rem, em i % w odstępach i układzie pozwalają tworzyć projekty dostosowujące się do preferencji użytkownika i różnych rozmiarów ekranu.
- Dopasuj do ustawień projektu: aby wyniki były dokładne, zawsze ustawiaj w przeliczniku bazowy rozmiar czcionki i wymiary viewportu zgodne z rzeczywistą konfiguracją projektu.
- Jednostek viewportu używaj z umiarem: vw i vh są skuteczne w płynnych układach, ale w przeglądarkach mobilnych, w których rozmiar viewportu zmienia się podczas przewijania, mogą sprawiać problemy. Dla bardziej niezawodnych wartości responsywnych rozważ funkcję CSS clamp().
- Testuj na różnych urządzeniach: po przeliczeniu jednostek sprawdź CSS na wielu urządzeniach i rozmiarach ekranu, aby upewnić się, że wartości dają oczekiwany wygląd.
- Zapisz typowe przeliczenia: gotowe ustawienia dla często potrzebnych wartości, takich jak 1rem, standardowe rozmiary czcionek i typowe obliczenia viewportu, przyspieszają pracę.