[ Narzędzia / Konwerter Jednostek CSS ]
Konwerter
Jednostek CSS
Przelicz px ↔ rem ↔ em, oblicz vw/vh, wygeneruj formuły clamp() i znajdź wartości Tailwind. Niezbędnik przy projektowaniu stron internetowych.
Domyślna wartość przeglądarki: 16px | 1rem = 16px
Wizualny podgląd (16px)
Tabela Szybkiego Przeliczania
Kliknij wartość aby skopiować — przy 16px bazowym
| px | rem | em |
|---|---|---|
| 8px | 0.5rem | 0.5em |
| 10px | 0.625rem | 0.625em |
| 12px | 0.75rem | 0.75em |
| 14px | 0.875rem | 0.875em |
| 16px | 1rem | 1em |
| 18px | 1.125rem | 1.125em |
| 20px | 1.25rem | 1.25em |
| 24px | 1.5rem | 1.5em |
| 28px | 1.75rem | 1.75em |
| 32px | 2rem | 2em |
| 36px | 2.25rem | 2.25em |
| 40px | 2.5rem | 2.5em |
| 48px | 3rem | 3em |
| 56px | 3.5rem | 3.5em |
| 64px | 4rem | 4em |
| 72px | 4.5rem | 4.5em |
| 80px | 5rem | 5em |
| 96px | 6rem | 6em |
[ Przewodnik ]
JednostkiCSS
wprojektowaniustron
Kiedy używać której jednostki przy tworzeniu stron internetowych — krótki przewodnik dla webdeveloperów i projektantów.
Piksele
Jednostka absolutna, zawsze odpowiada jednemu pikselowi urządzenia (lub subpikselowi przy wysokiej gęstości). Używana przy obramowaniach, cieniach, drobnych detalach w projektowaniu stron.
Root Em
Relatywna do rozmiaru czcionki elementu root (html). Domyślnie 1rem = 16px. Idealna do typografii i odstępów przy tworzeniu stron internetowych — skaluje się z preferencjami użytkownika.
Em
Relatywna do rozmiaru czcionki elementu rodzica. 1em = font-size rodzica. Może się "nawarstwiać" w zagnieżdżonych elementach. Przydatna do komponentów, które mają się skalować ze swoim kontekstem.
Viewport Width
1vw = 1% szerokości okna przeglądarki. Kluczowa przy projektowaniu responsywnych stron internetowych. Używana do szerokości kontenerów, fluid typography, dynamicznych rozmiarów.
Viewport Height
1vh = 1% wysokości okna przeglądarki. Przydatna do sekcji pełnoekranowych, hero sections i modal overlays przy tworzeniu stron www.
Viewport Min
1vmin = 1% mniejszego wymiaru okna (min z vw i vh). Używana gdy element ma zachować proporcje niezależnie od orientacji ekranu przy projektowaniu stron mobilnych.
Viewport Max
1vmax = 1% większego wymiaru okna (max z vw i vh). Rzadziej stosowana — przydatna gdy element ma być relatywny do największego wymiaru przy tworzeniu stron internetowych.
Procent
Procent względem wymiaru rodzica. 100% szerokości = szerokość rodzica. Podstawa layoutów CSS Grid i Flexbox przy projektowaniu stron internetowych responsywnych.
[ FAQ ]
Pytaniaojednostki
CSS
Najczęstsze pytania przy projektowaniu stron internetowych i tworzeniu stron www.
[ O Narzędziu ]
Narzędzia do
Projektowania Stron
Konwerter jednostek CSS to jedno z narzędzi, które tworzymy dla webdeveloperów i projektantów pracujących przy projektowaniu stron internetowych. Przeliczanie px, rem i em jest codzienną czynnością — warto mieć pod ręką szybki, działający w czasie rzeczywistym konwerter.
Przy tworzeniu stron internetowych responsywnych szczególnie przydatny jest generator formuł clamp() — pozwala tworzyć płynną typografię i spacing bez media queries, co upraszcza kod i poprawia doświadczenie użytkownika.
Pracujemy w oparciu o Tailwind CSS 4, dlatego dodaliśmy przelicznik wartości spacingu Tailwind — wszystkie 35 wartości wraz z odpowiednikami w px i rem.
[ Powiązane usługi ]
Projektowanie Stron Internetowych
Tworzymy nowoczesne strony www z dbałością o detale typograficzne i spacing. Każda strona internetowa to przemyślany system designu.
Strony Responsywne
Tworzenie stron internetowych responsywnych — płynne layouty działające na wszystkich urządzeniach, od mobile do 4K.
Technologie — Next.js, Tailwind
Używamy Next.js i Tailwind CSS do tworzenia szybkich stron www. Znajomość jednostek CSS to podstawa naszej codziennej pracy.
[ Studio Kalmus — Piaseczno ]
Potrzebujesz
strony internetowej?
Projektujemy i tworzymy strony internetowe, które wyglądają świetnie na każdym urządzeniu. Bezpłatna wycena w 24h.