1. Wpisz wartość
Wpisz liczbę w polu wejściowym. Możesz użyć kropki lub przecinka jako separatora dziesiętnego.
Przelicz vw na piksele
Ten konwerter przelicza jednostki CSS viewport width (vw) na piksele i odwrotnie. Możesz podać szerokość okna przeglądarki, a wynik pojawi się natychmiast.
Loading tool editor...
Czym jest jednostka vw w CSS?
vw (viewport width) to jednostka CSS równa 1% szerokości okna przeglądarki. Na ekranie 1 920 px szerokości: 1 vw = 19,2 px, 50 vw = 960 px, 100 vw = 1 920 px.
vw jest używane do tworzenia responsywnych układów – elementy skalują się proporcjonalnie do okna przeglądarki. Przydaje się do pełnoekranowych sekcji, nagromadzonych tytułów i elastycznych marginów.
Uwaga: 100 vw uwzględnia pasek przewijania, co może powodować poziomy scroll. Zamiast width: 100vw lepiej użyć width: 100% na blokach.
Istnieje też vh (viewport height): 1 vh = 1% wysokości okna. Oraz dvh/svh/lvh (dynamic/small/large viewport height) – uwzględniające pasek adresu na urządzeniach mobilnych.
Jak korzystać z konwertera?
2. Odczytaj wynik
Wynik konwersji pojawi się natychmiast w polu obok – bez klikania żadnego przycisku.3. Skopiuj lub zmień kierunek
Kliknij Kopiuj wynik lub użyj przycisku Zmień kolejność, aby przeliczać w drugą stronę.
Kiedy przydaje się ten konwerter?
Responsywne układy
Sekcje pełnoekranowe: width: 100vw, height: 100vh.Fluid typography
Tytuły skalowane: font-size: clamp(2rem, 5vw, 4rem).Mobile first
Marginesy i paddingi w vw skalują się z ekranem.CSS debugging
Sprawdź, ile px ma dany vw na konkretnym urządzeniu.
Co wyróżnia nasz konwerter?
Pełna prywatność
Wszystkie obliczenia odbywają się lokalnie w przeglądarce. Żadne dane nie są wysyłane na serwer.Wynik w czasie rzeczywistym
Wynik aktualizuje się natychmiast podczas wpisywania – bez konieczności klikania.Obustronna konwersja
Przycisk Zmień kolejność pozwala przeliczać w obu kierunkach jednym kliknięciem.Tabela popularnych wartości
Gotowa tabela z najczęściej przeliczanymi wartościami i opisami kontekstowymi.
Jak działa konwersja vw na px?
Jednostka vw (viewport width) w CSS odpowiada jednej setnej szerokości okna przeglądarki. Oznacza to, że 100 vw to pełna szerokość okna, a 50 vw to połowa. Aby przeliczyć vw na piksele, wystarczy pomnożyć wartość vw przez szerokość okna i podzielić przez 100.
Na przykład na ekranie o szerokości 1920 px wartość 50 vw to 960 px, a 25 vw to 480 px. Na mniejszym ekranie (np. 375 px na telefonie) te same 50 vw to zaledwie 187,5 px — dlatego elementy z jednostkami vw automatycznie skalują się do rozmiaru ekranu.
Jednostka vw jest szczególnie przydatna w projektowaniu responsywnym do definiowania szerokości kontenerów, rozmiarów czcionek i pełnoekranowych sekcji. Konwerter pozwala ustawić dowolną szerokość okna.
Praktyczne wskazówki
- Popularne szerokości: 375 px (iPhone), 768 px (tablet), 1 920 px (desktop Full HD).
- 100 vw uwzględnia scrollbar (ok. 15–17 px na desktopie). Użyj 100% zamiast 100vw.
- clamp() łączy vw z min/max:
font-size: clamp(1rem, 3vw, 2.5rem). - svh/lvh/dvh (CSS4) rozwiązują problem paska adresu na mobile.
vw (viewport width) vs px (piksele) – porównanie
| Cecha | vw (viewport width) | px (piksele) |
|---|---|---|
| Typ | Relatywna (% okna) | Absolutna |
| Responsywność | Automatyczna | Stała wartość |
| Na 1920 px | 1 vw = 19,2 px | 1 px = 0,052 vw |
| Na 375 px | 1 vw = 3,75 px | 1 px = 0,267 vw |
| Użycie | Układy, fluid type | Precyzyjne wymiary |
vw (viewport width)
- Typ
Relatywna (% okna) - Responsywność
Automatyczna - Na 1920 px
1 vw = 19,2 px - Na 375 px
1 vw = 3,75 px - Użycie
Układy, fluid type
px (piksele)
- Typ
Absolutna - Responsywność
Stała wartość - Na 1920 px
1 px = 0,052 vw - Na 375 px
1 px = 0,267 vw - Użycie
Precyzyjne wymiary
Konwertuj inne jednostki do px
Sprawdź konwertery innych jednostek
Najczęściej zadawane pytania
Pomóż nam ulepszyć narzędzia
Masz pomysł na nową funkcję, znalazłeś błąd lub chcesz zaproponować inne narzędzie? Napisz do nas – odpowiadamy w ciągu 24 godzin.