Konwerter jednostek CSS

Czym jest Konwerter jednostek CSS?

Konwerter jednostek CSS to darmowe narzędzie działające w przeglądarce, które przelicza pojedynczą długość CSS na siedem popularnych jednostek: px, rem, em, pt, %, vw i vh. Programiści front-end i projektanci stron używają go, aby przenieść układ między bezwzględnymi pikselami a jednostkami responsywnymi, sprawdzić, ilu pikselom odpowiada rem przy niestandardowym bazowym rozmiarze czcionki, lub zamienić wartość pt w stylu druku na piksele ekranu. Ponieważ rem zależy od bazowego rozmiaru czcionki, em i % zależą od rozmiaru czcionki elementu nadrzędnego, a vw/vh zależą od okna widoku, konwerter udostępnia wszystkie cztery jako konfigurowalne ustawienia. Wpisz wartość, wybierz jej jednostkę źródłową, a wszystkie pola wyników zaktualizują się jednocześnie. Gotowy do wklejenia fragment CSS wymienia wszystkie siedem odpowiedników jako deklaracje font-size.

Jak używać Konwerter jednostek CSS

1. Otwórz Ustawienia i ustaw bazowy rozmiar czcionki (font-size elementu html, na którym opiera się rem), rozmiar czcionki elementu nadrzędnego (dla em i %) oraz szerokość i wysokość okna widoku (dla vw i vh).
2. Wpisz liczbę, którą chcesz przeliczyć, w polu wartości.
3. Wybierz jednostkę źródłową z listy rozwijanej Z: px, rem, em, pt, %, vw lub vh.
4. Odczytaj każdy odpowiednik w opisanych polach wyników tylko do odczytu; wszystkie są przeliczane automatycznie, gdy zmieniasz wartość, jednostkę lub dowolne ustawienie.
5. Skopiuj wygenerowany fragment CSS, aby wkleić wszystkie siedem odpowiedników font-size bezpośrednio do swojego arkusza stylów.

Przykłady

Baza 16px, wartość 16, Z px

rem = 1

Baza 10px, wartość 2, Z rem

px = 20

wartość 16, Z px

pt = 12

Najczęściej zadawane pytania

Między jakimi jednostkami konwertuje?

Siedem jednostek długości CSS: px, rem, em, pt, %, vw i vh. Każda z nich może być źródłem, a wszystkie siedem odpowiedników jest pokazywanych jednocześnie.

Dlaczego muszę ustawić rozmiary bazowy, elementu nadrzędnego i okna widoku?

Te jednostki są względne. rem jest wielokrotnością bazowego rozmiaru czcionki (html), em i % są względne wobec rozmiaru czcionki elementu nadrzędnego, a vw/vh to procenty szerokości i wysokości okna widoku. Ustawienie ich w Ustawieniach informuje konwerter, czemu odpowiada każda jednostka względna.

Jak obsługiwane jest pt?

CSS definiuje 96px = 1in = 72pt, więc 1pt równa się 4/3 px, a 1px równa się 0,75pt. Konwerter używa tego stałego stosunku, niezależnie od rozmiaru czcionki czy okna widoku.

Co się dzieje, gdy wartość lub ustawienie jest nieprawidłowe?

Jeśli wartość nie jest liczbą skończoną lub jeśli któryś z rozmiarów bazowego, elementu nadrzędnego lub okna widoku jest pusty, zerowy lub ujemny, pola wyników pokazują myślnik (—), dopóki nie podasz prawidłowych liczb.

Czy cokolwiek jest wysyłane na serwer?

Nie. Wszystkie konwersje działają w całości po stronie klienta w Twojej przeglądarce, bez przesyłania i bez wywołań serwera, więc wprowadzane wartości nigdy nie opuszczają Twojego urządzenia.