vw in px umrechnen Viewport width ↔ Pixels Kostenlos Online Sicher
Geben Sie einen Wert in vw ein und lesen Sie ihn sofort in px ab. Gerechnet wird in Ihrem Browser, nichts wird irgendwohin geschickt, und wovon das Ergebnis abhängt, steht unten, statt vorausgesetzt zu werden.
Kein Upload
Übliche Größen — vw in px umrechnen
| vw | px |
|---|---|
| 0.5 | 7.2 |
| 1 | 14.4 |
| 2 | 28.8 |
| 5 | 72 |
| 10 | 144 |
| 25 | 360 |
| 50 | 720 |
| 100 | 1440 |
Woher diese Einheiten kommen
Das Pixel in CSS ist nicht das Pixel Ihres Bildschirms. Als Anzeigen keine vorhersagbare Dichte mehr hatten, wurde eine in echten Pixeln bemessene Seite zu einer Seite, die schrumpfte, je schärfer die Schirme wurden; also bestimmte man das CSS-Pixel neu als Bezugslänge: etwa 1/96 Zoll, aus bequemem Leseabstand gesehen. Alles andere auf dieser Seite baut darauf auf. Das Em ist älter als das Web — im Bleisatz war es die Breite eines gegossenen Blocks, benannt nach dem großen M — und bedeutet in CSS die geltende Schriftgröße, weshalb es sich beim Verschachteln ändert. Das Rem wurde eingeführt, um genau dem zu entkommen: es ist das Em des Wurzelelements und summiert sich nie. Das Vw kam mit dem responsiven Entwurf: ein Hundertstel der Fensterbreite, wie groß die auch ausfällt.
Wo sie Ihnen begegnen
Dies sind die Einheiten jedes Stylesheets. Pixel bemessen Rahmen, Schatten und alles, was nicht skalieren soll; Rem bemisst Schrift, Abstände und Layout, sodass eine einzige Änderung an der Wurzel eine ganze Oberfläche umskaliert; Em bemisst, was dem eigenen Text folgen soll, etwa die Polsterung in einer Schaltfläche; Vw bemisst Überschriften und Kopfbereiche, die auf jedem Gerät den Schirm füllen müssen. Zwischen ihnen umzurechnen ist die tägliche Rechenarbeit, aus einem in Pixeln übergebenen Entwurf ein Stylesheet zu machen, das mitwächst.
Häufige Fragen
Warum sind 16 px der übliche Ausgangspunkt?
Weil das in jedem großen Browser die voreingestellte Textgröße ist und ein Stylesheet, das sie nicht überschreibt, sie erbt. Ein Rem entspricht daher bei Voreinstellung 16 px — daher die vertrauten Umrechnungen: 0,5 rem sind 8 px, 1,5 rem sind 24 px. Hat ein Benutzer die Voreinstellung in seinem Browser vergrößert, wachsen dieselben Rem-Werte mit, und genau darum benutzt man sie.
Soll ich rem oder em nehmen?
Rem für alles, was der Seite als Ganzem folgen soll — Schriftstufen, Abstände, Layoutbreiten —, denn es wird von der Wurzel aus gemessen und häuft sich nie. Em für alles, was dem Text folgen soll, in dem es sitzt: die Polsterung einer Schaltfläche, der Abstand neben einem Symbol, der Einzug eines Zitats. Der verbreitete Fehler ist, em-bemessene Elemente ineinander zu schachteln: 1,2 em in 1,2 em wird 1,44, dann 1,73, bis der Text am Seitenende doppelt so groß ist wie gedacht.
Ist das Ergebnis exakt?
Wo beide Einheiten durch ganze Zahlen voneinander abgeleitet sind, ja — die Seite sagt es über der Zahl, und gerundet wird nur bei der Anzahl der angezeigten Stellen. Wo das Verhältnis keine endliche Dezimalzahl hat, zeigt die Seite zwölf signifikante Stellen und nennt die Beziehung näherungsweise, statt etwas anderes vorzugeben.
Verlässt etwas, das ich eingebe, mein Gerät?
Nein. Die Rechnung läuft in Ihrem Browser; nichts wird hochgeladen, und es gibt auch keinen Server dafür. Einmal geladen, funktioniert die Seite auch ohne Netz.
Warum man vw in px umrechnet
Ein Stylesheet sagt font-size: 5.2vw bei einem Hero-Titel, margin-top: 8vw bei einem Abschnitt und width: 42vw bei einem Bild. Das sind flexible Werte, und sie sagen Ihnen nicht, was auf dem Bildschirm steht. Wie groß ist der Titel auf einem Telefon? Wie breit ist das Bild auf einem Laptop? Sieht der Außenabstand bei 1920 Pixeln richtig aus? Um das herauszufinden, rechnen Sie vw in px um: Sie multiplizieren die Zahl mit der Breite des Fensters, teilen durch hundert und lesen die Antwort in der Einheit ab, die Designer, Tester und Kunden verwenden. Das tun Sie, wenn Sie fließenden Code durchsehen, einen Build gegen einen Entwurf prüfen oder einem Kollegen erklären, warum die Überschrift auf einem schmalen Bildschirm klein aussieht.
Was die Umrechnung von rem oder em unterscheidet, ist, dass der Multiplikator das Fenster selbst ist. Ein vw ist ein Hundertstel der Viewport-Breite, also sind 5,2vw in einem 1000 px breiten Fenster 52 px, auf einem 360 px breiten Telefon 18,7 px und auf einem breiten Monitor von 1920 99,8 px. Es gibt keinen Standard, auf den man zurückfallen könnte, und die Breite ändert sich, wenn der Leser das Telefon dreht oder das Fenster aufzieht. Der Umrechner fragt deshalb nach der Breite, zeigt sie neben der Antwort und beginnt bei 1440 px, einer Breite, in der Designs oft gezeichnet werden.
Die Berechnung geschieht in Ihrem Browser, und nichts wird hochgeladen. Weiter unten finden Sie die Formel, was die Umrechnung behält und nicht behalten kann, wie man ein fließendes Stylesheet bei mehreren Breiten liest, die Falle der Bildlaufleiste, das Barrierefreiheitsproblem von Text in reinem vw und einige Gewohnheiten, die fließenden Code verständlich halten.
Die Formel und die Breite
px ist gleich vw mal der Breite, geteilt durch hundert
Die Formel lautet px = vw × Breite ÷ 100. Bei einer Breite von 1440 px werden 10 vw zu 144 px, 5 vw zu 72 px und 1,667 vw zu 24 px. Die Seite druckt die Breite neben das Ergebnis, eine Zeile wie 10 vw = 144 px (1440 px) sagt Ihnen also, was angenommen wurde. Um einen anderen Bildschirm zu sehen, ändern Sie die Breite und lesen das Ergebnis erneut ab.
Welche Breiten man ausprobieren sollte
Ein nützlicher Satz zum Prüfen sind 360 oder 390 für Telefone, 768 für ein hochkant gehaltenes Tablet, 1024 für einen kleinen Laptop, 1440 für einen typischen Laptop oder Desktop und 1920 für einen Full-HD-Monitor. Geben Sie jede im Breitenfeld ein und notieren Sie das Ergebnis. Fünf Ablesungen zeigen Ihnen den ganzen Bereich eines Wertes, und jedes Extrem fällt auf.
Die Breite des tatsächlichen Fensters verwenden
In den Entwicklerwerkzeugen Ihres Browsers zeigt die Geräteleiste die Breite des Fensters in Pixeln. Verwenden Sie diese Zahl, um zu vergleichen, was die Seite tut, mit dem, was der Umrechner sagt. Stimmen sie überein, ist Ihre Lesart des Stylesheets richtig.
Was die Umrechnung behält und was nicht
Sie behält den Anteil am Bildschirm
Ein vw ist ein Hundertstel der Viewport-Breite, eine in vw geschriebene Größe wächst und schrumpft also mit dem Fenster, statt festzustehen. Der Pixelwert, den Sie erhalten, ist dieser Anteil, für eine bestimmte Breite konkret gemacht.
Sie kann keinen Standard liefern
Anders als rem hat vw keinen Standard. Ein Browser gibt der Wurzel-Schriftgröße 16 px, wenn niemand etwas anderes sagt, eine rem-Seite kann also von einer echten Zahl ausgehen; die Viewport-Breite ist schlicht so breit, wie das Fenster des Lesers ist, und sie ändert sich, wenn er das Telefon dreht. Die 1440 px hier sind eine Breite, in der Designs oft gezeichnet werden, eine Gewohnheit und kein Standard. Geben Sie Ihre eigene ein.
Runden
Das Multiplizieren mit der Breite und Teilen durch 100 kann Dezimalstellen ergeben. 6,67 vw bei 1440 px sind 96,048 px. Browser kommen mit gebrochenen Pixeln zurecht, doch brauchen Sie für eine Designdatei eine ganze Zahl, runden Sie und vermerken Sie, dass die Rundung von Ihnen stammt.
Ein fließendes Stylesheet lesen
Drei Breiten nehmen und die Ergebnisse aufschreiben
Wählen Sie eine schmale, eine mittlere und eine breite Breite, zum Beispiel 375, 1024 und 1920. Rechnen Sie für jeden wichtigen vw-Wert im Stylesheet bei jeder Breite vw in px um und schreiben Sie die drei Zahlen in eine Notiz. Eine Überschrift von 5,2 vw ergibt 19,5, 53,2 und 99,8 Pixel. So gesehen wissen Sie, ob die Überschrift am schmalen Ende lesbar und am breiten Ende nicht erdrückend ist.
Nach clamp suchen
Gut geschriebener fließender Code setzt mit clamp(min, bevorzugt, max) Grenzen um vw. Sehen Sie clamp(2rem, 1rem + 4vw, 6rem), wächst die Größe zwischen 32 und 96 px und hält an beiden Enden. Wenn Sie den vw-Teil umrechnen, denken Sie daran, dass er nur die Mitte des Bereichs ist und die Grenzen bestimmen, was an den Rändern geschieht.
Die Extreme prüfen
Die riskanten Breiten sind die kleinste und die größte. Bei 320 px sind 6 vw bei einer Überschrift 19 px; bei 2560 sind es 154 px. Sieht keines von beiden akzeptabel aus und gibt es kein clamp, braucht das Stylesheet Grenzen.
Fallen beim Umrechnen von vw in px
Die Bildlaufleiste
In Desktop-Browsern schließt die für vw verwendete Viewport-Breite die Breite der vertikalen Bildlaufleiste ein. So sind 100vw etwas breiter als der sichtbare Bereich, wenn die Seite scrollt, auf vielen Systemen um etwa 15 bis 17 Pixel. Der berechnete Pixelwert ist daher etwas größer als die sichtbare Breite, die er zu vertreten scheint. Auf Telefonen, wo Bildlaufleisten die Seite überlagern, fehlt der Effekt.
Die falsche Breite verwenden
Das Ergebnis ist nur so richtig wie die eingegebene Breite. Ist Ihr Testfenster 1366 px breit und Sie rechnen bei 1440 um, ist jeder Wert um etwa fünf Prozent daneben. Lesen Sie die echte Breite aus den Entwicklerwerkzeugen ab.
vw mit Prozent verwechseln
Eine Breite von 50 % bezieht sich auf die Breite des übergeordneten Elements, während sich 50vw auf das Fenster beziehen. In einem schmalen Container sind die beiden sehr verschieden. Der Umrechner liefert die vw-Antwort; liegt Ihr Element in einem Container, kann das übergeordnete Element schmaler sein als das Fenster.
Vergessen, dass Text in vw sich nicht zoomen lässt
Nur in vw bemessener Text reagiert nicht, wenn der Leser die Seite zoomt, weil Fenster und Text gemeinsam skalieren. Barrierefreiheitsrichtlinien verlangen, dass sich Text in der Größe ändern lässt. Fügen Sie wie bei clamp() einen rem-Term hinzu, damit der Text auch auf Zoom reagiert.
Fragen, die man vor dem Umrechnen stellt
Wie viele Pixel sind 1 vw?
Ein Hundertstel der Fensterbreite: 14,4 px bei 1440, 10 px bei 1000, 3,6 px bei 360.
Wie viele Pixel sind 50 vw?
Die Hälfte des Fensters: 720 px bei 1440 Breite, 500 px bei 1000 Breite.
Warum ist meine Seite breiter als der Bildschirm?
Ein Kasten von 100vw auf einer Seite, die scrollt, ist breiter als der sichtbare Bereich, weil die Bildlaufleiste mitgezählt wird. Verwenden Sie stattdessen 100 % innerhalb eines Containers.
Ist vw dasselbe wie Prozent?
Nein. Prozent bezieht sich auf das übergeordnete Element, vw auf das Fenster.
Wird meine Zahl hochgeladen?
Nein. Die Arithmetik läuft in Ihrem Browser, und nichts wird irgendwohin gesendet.
Wie komme ich zurück?
Mit px in vw umrechnen, das durch die Breite teilt, statt zu multiplizieren.
Gängige Werte bei gängigen Breiten
Eine Kopftabelle
Es hilft, einige Anker zu kennen, um vor dem Einsatz des Umrechners schätzen zu können. Bei einer Breite von 1000 px sind 1 vw gleich 10 px, was die Arithmetik trivial macht: 2,5 vw sind 25 px, 8 vw sind 80 px. Bei 1440 px sind 1 vw gleich 14,4 px. Bei 375 px sind 1 vw gleich 3,75 px, ein Titel von 8 vw hat also 30 px. Wenn Sie für eine schnelle Prüfung vw in px umrechnen, beginnen Sie bei einem dieser Anker und skalieren Sie.
Drei Breiten, ein Stylesheet
Nehmen Sie eine Karte mit einer Breite von 80vw, einem Zwischenraum von 4vw und einem Titel von 6vw. Auf einem Telefon mit 375 px ergibt das 300 px, 15 px und 22,5 px. Auf einem Tablet mit 768 px 614 px, 30,7 px und 46 px. Auf einem Desktop mit 1440 px 1152 px, 57,6 px und 86,4 px. Alle drei nebeneinander zu sehen sagt Ihnen sofort, dass die Karte auf dem Desktop viel zu breit und der Titel viel zu groß ist und dass Sie wahrscheinlich eine maximale Breite und ein clamp wollen.
Jenseits des Viewports
Container-Einheiten
Neueres CSS bietet Einheiten relativ zu einem Container statt zum Fenster, etwa cqw, ein Hundertstel der Breite des Containers. Sie lösen das Problem, dass sich eine in eine schmale Seitenleiste gesetzte Komponente verhält, als hätte sie das ganze Fenster. Verwenden Sie sie, ist die Arithmetik dieselbe wie bei vw, mit der Breite des Containers als Basis, und Sie können diesen Umrechner nutzen, indem Sie diese Breite eingeben.
Kleine, große und dynamische Viewports
Auf Telefonen ändert sich der sichtbare Bereich, wenn die Adressleiste wegrutscht. Für Höhen beschreiben die neueren Einheiten svh, lvh und dvh den kleinen, großen und dynamischen Viewport. Bei Breiten ist die Lage einfacher, da die Adressleiste sie nicht beeinflusst, und vw ist stabil. Das ist ein weiterer Grund, warum vw für fließendes Design auf Mobilgeräten eine sicherere Einheit ist als vh.
Prozent, vw und das Raster
Prozentbreiten folgen dem übergeordneten Element, vw folgt dem Fenster, und CSS-Grid und Flexbox folgen dem verfügbaren Platz. Oft nutzen die besten fließenden Layouts Grid und Prozent für die Struktur und vw nur für Schrift und Abstände, denn das sind die Dinge, die davon profitieren, dem Bildschirm direkt zu folgen. Wenn Sie vw in px umrechnen, um ein Layout zu prüfen, fragen Sie, ob eine Rasterspur dasselbe robuster gesagt hätte.
vw Menschen erklären, die kein CSS schreiben
Das Fenster als Lineal nutzen
Kunden und Kollegen verstehen die Idee meist, wenn Sie sagen, ein vw sei ein Prozent der Bildschirmbreite. Ein Titel von 5 vw ist fünf Prozent der Bildschirmbreite breit. Zeigen Sie ihnen dann zwei Zahlen: was es auf ihrem eigenen Telefon ergibt und auf dem großen Monitor im Besprechungsraum. Wenn Sie für beide Breiten vw in px umrechnen und die Ergebnisse laut sagen, wird die Idee einer Größe, die sich mit dem Bildschirm bewegt, greifbar.
Sagen, warum das Design nicht fest ist
Fachfremde Beteiligte fragen manchmal, warum die Seite nicht einfach eine Größe für den Titel hat. Die Antwort ist, dass sich Bildschirme zwischen dem kleinsten Telefon und dem größten Monitor um den Faktor sieben oder acht unterscheiden und eine feste Größe, die für den einen passt, für den anderen falsch ist. Fließende Einheiten sind die Antwort, und die Pixelwerte dieser Seite zeigen, wie sehr der Bildschirm denselben Wert verändert.
Woher diese Einheiten kommen
Das CSS-Pixel
Als Bildschirme keine vorhersehbare Dichte mehr hatten, wurde eine in echten Pixeln bemessene Seite zu einer Seite, die schrumpfte, je schärfer die Bildschirme wurden. Also wurde das CSS-Pixel als Referenzlänge neu definiert: etwa 1/96 Zoll, gesehen aus bequemem Leseabstand. Es ist die Einheit, in der diese Seite ihre Antworten gibt.
Die Viewport-Einheiten
Das vw kam mit dem responsiven Design: ein Hundertstel der Breite des Viewports, wie breit der auch sein mag. Es steht neben rem, relativ zur Schriftgröße der Wurzel, und em, relativ zum Element. Um zu sehen, wie derselbe Pixelwert in diesen Einheiten aussieht, rem in px umrechnen und vergleichen.
Gewohnheiten, die fließenden Code verständlich halten
Die Pixelwerte kommentieren
Eine Zeile wie font-size: clamp(2rem, 1rem + 4vw, 6rem); /* 32px at 360, 96px at 1440 */ kostet ein paar Worte und erspart dem nächsten Leser mehrere Umrechnungen.
Die Designbreite an einer Stelle halten
Hat Ihr Projekt eine benutzerdefinierte Eigenschaft für die Breite, in der das Design gezeichnet wurde, lässt sich jeder vw-Wert darauf zurückführen. Wenn Sie für eine Durchsicht vw in px umrechnen, wissen Sie, welche Breite Sie verwenden.
vw sparsam einsetzen
Eine kurze Liste von vw-Werten ist leicht zu durchdenken. Ein Stylesheet, in dem alles in vw steht, nicht. Behalten Sie es für Schaustücke der Schrift, große Abstände und Grafiken.
Wenn es darauf ankommt, mit echten Geräten testen
Browserwerkzeuge simulieren Breiten gut, doch ein echtes Telefon zeigt das wahre Verhalten von Adressleisten, Drehung und Zoom. Eine Prüfung von fünf Minuten auf einem Gerät fängt ab, was eine Simulation übersieht.
Verwandte Umrechner
Dieselbe Werkzeugfamilie deckt die benachbarten Umrechnungen ab. Um zu vw zurückzukehren, nutzen Sie px in vw umrechnen. Für Größen relativ zur Wurzel gibt es px in rem umrechnen und rem in px umrechnen, für Größen relativ zum Element px in em umrechnen und em in px umrechnen. Für die Farben desselben Stylesheets erledigen HEX in RGB umrechnen und RGB in HEX umrechnen die Schreibweisen.
Ein durchgerechnetes Beispiel
Angenommen, ein Tester meldet, dass der Hero-Titel auf einem kleinen Telefon schwer zu lesen ist. Das Stylesheet sagt font-size: 5.2vw ohne Grenzen. Sie rechnen vw bei 360 in px um und lesen 18,7 px ab, bei 768 lesen Sie 39,9 px ab, bei 1440 lesen Sie 74,9 px ab. Am schmalen Ende ist der Titel etwas größer als der Fließtext und liest sich nicht mehr als Titel. Sie schlagen clamp(2rem, 1rem + 4vw, 5rem) vor, was am schmalsten 32 px, bei 768 etwa 51 px und am breitesten 5rem, also 80 px, ergibt. Der Tester bestätigt, dass er sich nun gut liest, und der Titel skaliert weiterhin.
Eine kurze Checkliste
Vor dem Umrechnen
Wählen Sie die Breiten, die Sie interessieren, aus den Entwicklerwerkzeugen oder aus Ihrer Liste der Zielgeräte.
Beim Umrechnen
Geben Sie den vw-Wert und nacheinander jede Breite ein und notieren Sie die neben der Basis gezeigten Pixel.
Nach dem Umrechnen
Sehen Sie sich die Extreme an. Ist eine Größe an einem Ende zu klein oder zu groß, fügen Sie mit clamp() Grenzen hinzu.
Häufige Fehler
Von einer einzigen Antwort ausgehen
Ein vw-Wert hat bei jeder Breite eine andere Pixelgröße. Geben Sie zu jedem Wert die Breite an.
Die Bildlaufleiste vergessen
100vw schließt sie ein, ein Kasten über die volle Breite kann also überlaufen.
Fließtext allein in vw bemessen
Er lässt sich nicht zoomen. Fügen Sie einen rem-Term und Grenzen hinzu.
Ihre Zahlen bleiben auf Ihrem Gerät
Die Berechnung findet lokal statt. Ihre Werte werden von Ihrem eigenen Browser verwendet, und nichts wird irgendwohin gesendet. Danach gibt es nichts zu löschen und kein Konto anzulegen. Das ist der schlichte Weg, vw in px umzurechnen.
Zusammenfassung
Um vw hier in px umzurechnen, geben Sie die Größe in vw und die Breite des Fensters ein und lesen das Ergebnis sofort in Pixeln ab, nach der Formel px = vw × Breite ÷ 100. Die Breite beginnt bei 1440 px, einer Breite, in der Designs oft gezeichnet werden, doch das ist eine Gewohnheit und kein Standard, geben Sie also Ihre eigene ein. Die Umrechnung behält den Anteil am Bildschirm: Ein vw ist ein Hundertstel der Viewport-Breite, eine Größe in vw wächst und schrumpft also mit dem Fenster. Anders als rem hat vw keinen Standard, da der Viewport so breit ist, wie das Fenster des Lesers ist. Kombinieren Sie vw bei Text mit rem innerhalb von clamp(), damit er lesbar und zoombar bleibt. Nichts wird hochgeladen.