px in vw umrechnen Pixels ↔ Viewport width Kostenlos Online Sicher

Warum man px in vw umrechnet

Eine Designerin schickt einen Entwurf, gezeichnet mit 1440 px Breite, mit einer Hero-Überschrift von 96 px und einem Abschnittsabstand von 72 px. Im echten Web wird die Seite mit 360 px auf einem Telefon, 820 px auf einem Tablet und 2560 px auf einem großen Monitor zu sehen sein, und die Designerin möchte, dass die Überschrift bei jedem davon ihre Proportion zum Bildschirm behält. Die dafür gemachte Einheit ist die Viewport-Breite, vw, und der Weg dorthin vom Entwurf aus ist, px in vw umzurechnen: Sie nehmen den Pixelwert, teilen ihn durch die Breite, in der das Design gezeichnet wurde, und multiplizieren mit einhundert. Eine Überschrift von 96 px auf einer Zeichenfläche von 1440 px sind 6,67 vw, und von da an sind es immer 6,67 Prozent dessen, was der Bildschirm gerade ist.

Das ist das Versprechen der Viewport-Einheit, und zugleich ihr Risiko. Rem und em gehen von einer Schriftgröße aus, die ein Browser auf einen vernünftigen Standard setzt. Vw hat überhaupt keinen Standard: Die Viewport-Breite ist schlicht so breit, wie das Fenster des Lesers ist, und sie ändert sich, wenn er das Telefon dreht oder das Fenster aufzieht. Der Umrechner verbirgt deshalb die eine Zahl nicht, von der die Antwort abhängt. Die Breite des Designs steht in einem Feld, beginnend bei 1440 px, und Sie können sie an Ihren Entwurf anpassen.

Die Arithmetik läuft in Ihrem Browser, und nichts wird hochgeladen. Weiter unten finden Sie die Formel, was die Umrechnung behält und nicht behalten kann, wo Viewport-Einheiten helfen und wo sie schaden, das Barrierefreiheitsproblem, das reiner vw-Text schafft, die clamp-Technik, die es behebt, und eine Methode, aus einem Pixel-Entwurf ein fließendes Stylesheet zu machen.

Die Formel und die Breite

vw ist gleich px geteilt durch die Breite, mal einhundert

Die Formel lautet vw = px ÷ Breite × 100. Bei einer Designbreite von 1440 px wird eine Größe von 144 px zu 10 vw, 72 px zu 5 vw und 24 px zu 1,667 vw. Die Seite zeigt die Breite neben dem Ergebnis, etwa 144 px = 10 vw (1440 px), damit Sie sehen, was angenommen wurde. Ein vw ist ein Hundertstel der Viewport-Breite, in einem 1000 px breiten Fenster entspricht 1 vw also 10 px.

Woher die 1440 kommt

Die 1440 px sind hier eine Breite, in der Designs oft gezeichnet werden, eine Gewohnheit und kein Standard. Manche Teams zeichnen mit 1280, viele mit 1920, und mobile Designs mit 375 oder 390. Es gibt keine richtige Antwort, nur die Breite, die Ihre Designdatei verwendet. Geben Sie Ihre eigene ein: Die Umrechnung ist nur so gut wie die Breite, die Sie ihr geben.

Die eigene Breite des Designs verwenden

Wurde der Entwurf mit 1920 px gezeichnet, geben Sie 1920 ein, und dieselbe Überschrift von 96 px wird zu 5 vw. Rechnen Sie px mit der falschen Breite in vw um, sieht die Seite bei einer Bildschirmgröße richtig und bei allen anderen falsch aus, was ein rätselhafter Fehler ist, wenn man nicht weiß, wo man suchen soll.

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. Das Ergebnis ist der Anteil am Bildschirm, den der Pixelwert in Ihrem Entwurf einnahm, und im Browser behält das Element diesen Anteil bei jeder Breite.

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 Breite im Feld ist die Breite Ihres Designs, und die Antwort stimmt für einen Bildschirm dieser Breite und ist überall sonst in Proportion.

Runden

Die Division durch 1440 erzeugt für die meisten Größen lange Dezimalbrüche. Ein Wert wie 6,6667 vw ist in einem Stylesheet in Ordnung, doch Sie können auf 6,67 oder 6,7 runden, ohne dass sich sichtbar etwas ändert. Behalten Sie zwei oder drei Stellen nach dem Komma; mehr ist Rauschen.

Wo Viewport-Einheiten helfen

Hero-Überschriften und große Schaustücke der Schrift

Eine Überschrift, die auf jedem Gerät einen bestimmten Anteil des Bildschirms füllen muss, ist der klassische Einsatz. Bei der Breite eines Telefons würde eine feste Überschrift von 96 px überlaufen; in vw schrumpft sie mit dem Bildschirm und bleibt in einer Zeile.

Abschnitte über die volle Breite

Der Abstand zwischen großen Abschnitten einer Landingpage sieht oft am besten aus, wenn er mit dem Bildschirm skaliert, sodass die Seite ihren Rhythmus auf einem kleinen Laptop und auf einem breiten Display behält. Abstände in vw leisten das.

Grafiken, die ihre Form behalten müssen

Hero-Bilder, Illustrationen und dekorative Formen, die in vw bemessen sind, behalten ihre Proportionen zum Fenster, sodass die Komposition nicht auseinanderfällt, wenn sich der Bildschirm ändert.

Fließende Schrift mit Grenzen

Zusammen mit clamp() ergibt vw Schrift, die zwischen einem Minimum und einem Maximum gleichmäßig wächst. Das ist die Technik, die moderne Stylesheets für Überschriften nutzen, und sie wird weiter unten behandelt.

Wo Viewport-Einheiten schaden

Fließtext in reinem vw

Nur in vw bemessener Text reagiert nicht, wenn der Leser die Seite im Browser zoomt, denn das Zoomen verändert die Pixelgröße des Fensters, doch eine vw-Größe behält ihren Anteil daran. Menschen, die auf das Zoomen angewiesen sind, oft wegen schlechten Sehvermögens, bleiben mit Text zurück, den sie nicht vergrößern können. Barrierefreiheitsrichtlinien verlangen, dass sich Text in der Größe ändern lässt, und eine reine vw-Größe besteht diesen Test nicht.

Winzige und riesige Extreme

Bei 320 px Breite hat eine Überschrift von 6,67 vw 21 px, was zu klein sein kann. Bei 2560 px Breite hat sie 171 px, was enorm ist. Ohne Grenzen kann die Proportion, die bei 1440 richtig aussah, an den Rändern absurd sein.

Die Bildlaufleiste

In Desktop-Browsern schließt die für vw verwendete Viewport-Breite die Breite der vertikalen Bildlaufleiste ein. Ein auf 100vw gesetzter Kasten ist daher etwas breiter als der sichtbare Bereich, wenn die Seite scrollt, und eine horizontale Bildlaufleiste kann erscheinen. Wissen Sie das, bevor Sie ein Layout über die volle Breite aus vw bauen.

Die clamp-Technik

Eine Untergrenze und eine Obergrenze setzen

Die CSS-Funktion clamp(min, bevorzugt, max) nimmt ein Minimum, einen bevorzugten Wert und ein Maximum. Schreiben Sie bei Schrift das Minimum und das Maximum in rem und den bevorzugten Wert in vw plus einem rem-Term: font-size: clamp(2rem, 1rem + 4vw, 6rem). Die Größe wächst mit dem Fenster zwischen 32 und 96 px und geht über keines der beiden Enden hinaus. Weil ein Teil davon in rem ist, respektiert der Text weiterhin die Einstellungen des Lesers.

Den mittleren Term bilden

Wählen Sie zwei Bildschirmbreiten und die Größen, die Sie bei jeder wollen. Zum Beispiel 32 px bei 360 px Breite und 96 px bei 1440 px Breite. Die Steigung ist (96 − 32) ÷ (1440 − 360) = 0,0593 px pro px Breite, das sind 5,93 vw, und der Achsenabschnitt ist 32 − 0,0593 × 360 = 10,67 px, etwa 0,667 rem. Der bevorzugte Term ist daher 0.667rem + 5.93vw. Der Umrechner hilft beim vw-Teil, und eine Minute Rechnen erledigt den Rest.

Warum das die richtige Balance ist

Mit clamp erhalten Sie das fließende Verhalten, das Designer wollen, und die Zugänglichkeit, die Leser brauchen. Es ist die Antwort auf das oben beschriebene Problem und der Grund, warum die meisten modernen Stylesheets vw nur innerhalb von clamp verwenden.

So rechnen Sie px hier in vw um

Den Pixelwert eingeben

Geben Sie die Größe in Pixeln im ersten Feld ein. Dezimalzahlen werden akzeptiert.

Die Breite des Designs festlegen

Lassen Sie sie bei 1440, wenn das die Breite Ihres Entwurfs ist. Ändern Sie sie, wenn nicht. Das Ergebnis aktualisiert sich beim Tippen.

Den vw-Wert kopieren

Verwenden Sie den Wert in Ihrem CSS mit seiner Einheit, etwa font-size: 6.67vw. Bei Text setzen Sie ihn zusammen mit Grenzen in rem in clamp().

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 Ihr Entwurf gezeichnet ist.

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, das relativ zur Schriftgröße der Wurzel ist, und em, das relativ zum Element ist. Brauchen Sie Größen relativ zum Text statt zum Bildschirm, px in rem umrechnen.

Fallen beim Umrechnen von px in vw

Die falsche Designbreite verwenden

Der häufigste Fehler. Ist Ihr Entwurf 1920 breit und Sie rechnen mit 1440, ist jede Größe um ein Drittel daneben. Bestätigen Sie die Breite des Rahmens in Ihrem Design-Werkzeug.

Das mobile Design vergessen

Viele Teams haben zwei Entwürfe, einen für den Desktop und einen für das Telefon. Eine Überschrift, die im ersten 96 px und im zweiten 40 px hat, ist kein einzelner vw-Wert. Verwenden Sie zwei Breiten, zwei Umrechnungen und ein clamp, um sie zu verbinden.

Die ganze Seite in vw setzen

Eine Seite, auf der alles mit dem Fenster skaliert, verliert ihr Lesegefühl: Zeilen werden auf breiten Bildschirmen zu lang und Text auf schmalen zu klein. Verwenden Sie vw für die wenigen Dinge, die skalieren sollen, und feste oder rem-Größen für den Rest.

Das Zoomproblem ignorieren

Testen Sie Ihre Seite mit auf 200 Prozent gezoomtem Browser. Wächst der Text nicht, brauchen die Größen einen rem-Term.

Fragen, die man vor dem Umrechnen stellt

Wie viel vw sind 100 px?

Bei einer Designbreite von 1440 px etwa 6,94 vw.

Welche Designbreite ist die beste?

Die, in der Ihr Entwurf gezeichnet wurde. Es gibt keinen allgemeinen Standard.

Ist vw besser als rem?

Sie erfüllen verschiedene Aufgaben. Rem folgt der Textgröße des Lesers; vw folgt dem Fenster. Nutzen Sie jedes für das, worin es gut ist.

Kann ich vw für die Schriftgröße verwenden?

Ja, aber setzen Sie es in clamp() mit Grenzen in rem, damit der Text lesbar bleibt und sich weiterhin zoomen lässt.

Wird meine Zahl hochgeladen?

Nein. Die Arithmetik läuft in Ihrem Browser, und nichts wird irgendwohin gesendet.

Wie komme ich zurück?

Mit vw in px umrechnen, das mit der Breite multipliziert, statt zu dividieren.

Klug wählen, wenn Sie px in vw umrechnen

Entscheiden, was mit dem Bildschirm skalieren soll

Hero-Schrift, große Abstände und Grafiken: ja. Fließtext, Rahmen, kleine Bedienelemente: nein. Je kürzer Ihre Liste von vw-Werten, desto robuster die Seite.

In der Entwurfsphase umrechnen

Rechnen Sie px in vw um, während Sie den Entwurf lesen, sehen Sie sofort, welche Werte krumm herauskommen, und können die Designerin um glattere bitten. Eine Überschrift, die sich als 6,6667 vw erweist, lädt zu einem Gespräch darüber ein, sie auf 6,5 oder 7 zu setzen.

Die Breite festhalten

Schreiben Sie die Designbreite in einen Kommentar am Anfang des Stylesheets, damit jeder, der später umrechnet, dieselbe verwendet. Gemischte Breiten ergeben eine Seite, die auf eine Weise uneinheitlich ist, die niemand recht erklären kann.

Vom Entwurf zu einem fließenden Stylesheet

Die Größen auflisten, die skalieren sollen

Öffnen Sie die Designdatei und schreiben Sie jede Größe auf, die dem Bildschirm folgen soll: den Hero-Titel, die Abschnittsabstände, vielleicht eine große Illustration. Rechnen Sie für jede px gegen die Breite des Rahmens in vw um und notieren Sie das Ergebnis. Die meisten Seiten enden mit weniger als zehn solchen Werten, und alles andere bleibt in rem oder Pixeln.

Den mobilen Rahmen gesondert prüfen

Gibt es einen Telefonentwurf, lesen Sie dieselben Elemente bei dessen Breite ab. Ein Titel von 96 px in einem Rahmen von 1440 px und 40 px in einem Rahmen von 375 px passt zu keinem einzelnen vw-Wert, was das Signal ist, clamp zu verwenden: Die Telefongröße wird zur Untergrenze, die Desktopgröße zur Obergrenze, und der vw-Term leistet die Arbeit dazwischen. Rechnen Sie px für jeden Rahmen in vw um, bestimmen die beiden Zahlen die Steigung.

Bei drei Breiten durchsehen

Sehen Sie sich die fertige Seite bei etwa 360, 820 und 1440 Pixeln und einmal bei 2560 an. Fließende Layouts sind bei der Breite des Entwurfs leicht richtig zu bekommen und anderswo unterschwellig falsch, und ein kurzer Gang durch diese Breiten findet die meisten Probleme, bevor es ein Besucher tut.

Die Einheit aus langem Text heraushalten

Zeilen von Lesetext bemessen Sie am besten in rem und geben ihnen eine maximale Zeilenlänge von etwa 60 bis 75 Zeichen. Nutzen Sie die Viewport-Einheit für Schaustücke der Schrift und für Abstände, und lassen Sie den Lesetext beständig sein.

Verwandte Umrechner

Dieselbe Werkzeugfamilie deckt die benachbarten Umrechnungen ab. Um zu Pixeln zurückzukehren, nutzen Sie vw in px 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 HEX in HSL umrechnen die Schreibweisen.

Ein durchgerechnetes Beispiel

Angenommen, eine Landingpage ist mit 1440 px entworfen, mit einem Hero-Titel von 96 px und einem Abstand von 72 px darüber. Sie geben 96 ein und lesen 6,667 vw ab, geben 72 ein und lesen 5 vw ab. In einem Fenster von 1000 px hat der Titel 66,7 px und der Abstand 50 px, in Proportion. Auf einem Telefon mit 360 px Breite hätte der Titel aber 24 px, was kleiner ist, als Sie wollen, also schreiben Sie den Titel als clamp(2.25rem, 1rem + 5vw, 6rem), mit einer Untergrenze von 36 px und einer Obergrenze von 96 px, und er bleibt lesbar und zoombar. Der Abstand, der keinen Text hat, bleibt in schlichtem vw.

Eine kurze Checkliste

Vor dem Umrechnen

Finden Sie die Breite des Entwurfs. Entscheiden Sie, welche Größen skalieren sollen und welche nicht.

Beim Umrechnen

Geben Sie den Pixelwert und die Designbreite ein und kopieren Sie den vw-Wert mit seiner Einheit.

Nach dem Umrechnen

Ändern Sie die Fenstergröße von der Telefonbreite bis zu einem breiten Monitor und zoomen Sie die Seite auf 200 Prozent. Fügen Sie mit clamp() Grenzen hinzu, wo die Extreme falsch aussehen.

Häufige Fehler

Annehmen, 1440 sei ein Standard

Es ist nur eine Gewohnheit. Verwenden Sie Ihre eigene Breite.

Fließtext allein in vw bemessen

Er lässt sich nicht zoomen. Fügen Sie einen rem-Term und Grenzen hinzu.

Die Bildlaufleiste vergessen

100vw ist auf scrollenden Desktop-Seiten breiter als der sichtbare Bereich.

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, px in vw umzurechnen.

Zusammenfassung

Um px hier in vw umzurechnen, geben Sie die Größe in Pixeln und die Breite Ihres Designs ein und lesen das Ergebnis sofort ab, nach der Formel vw = px ÷ 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.