DARMOWE NARZĘDZIE

Konwerter Viewport do Pixel

Przelicz jednostki CSS viewport (vw, vh, vmin, vmax) na piksele dla dowolnego rozmiaru ekranu. Bezpłatnie. Profesjonalne narzędzie online, które działa w Twojej przeglądarce. Szybko, bezpiecznie i bez instalowania zbędnego oprogramowania.

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Ustawienia

Tryb

Decimals

Viewport width

Viewport height

Value

Include reference Opcja narzędzia

Include formula Opcja narzędzia

Wynik

Ustaw parametry i kliknij „Przetwórz”, aby zobaczyć wynik.

Powiązane narzędzia

Inne narzędzia, które mogą Ci się przydać

Konwerter viewport units na piksele CSS online

Viewport units (vw, vh, vmin, vmax) to CSS jednostki wzgledne. 1vw = 1% szerokosci viewport. Konwerter oblicza piksele dla dowolnego rozmiaru ekranu lub urządzenia.

viewport na piksele vw vh do px CSS units konwerter responsive design units

Jednostki viewport

1vw = 1% szerokosci viewport (window.innerWidth). 1vh = 1% wysokosci viewport. 1vmin = 1% mniejszego wymiaru. 1vmax = 1% wiekszego wymiaru. Uzywane w responsive design.

Przykłady

Ekran 1920px szerokosc: 1vw = 19.2px, 50vw = 960px. Ekran 375px (mobile): 1vw = 3.75px, 100vw = 375px. Kalkulator ma presety dla popularnych urzadzen.

Najczęstsze pytania

Czym rozni sie vw od %?

% szerokosci = wzgledem elementu nadrzednego. vw = zawsze wzgledem viewport (okna przegladarki). font-size: 5vw resizes z oknem, 5% nie.

Co to jest dvh, svh, lvh (CSS4)?

Dynamic vh (dvh): zmienia sie gdy pasek URL mobilny znika/pojawia. Small vh (svh): minimalny viewport (z paskiem). Large vh (lvh): maksymalny (bez paska). Rozwiazuje problem "100vh za duze na mobile".

Jak debugowac viewport units?

DevTools: zakładka Elements → Computed lub Console: console.log(window.innerWidth, window.innerHeight). Kalkulator pokazuje tez responsywne breakpointy.

Inne narzedzia CSS: kalkulator specificity i narzedzia kolorow.