Bitte in welchem Szenario sollte ich vh, vw anstelle von Prozent oder px in CSS verwenden.Virtuelle Breite, virtuelle Höhe,%
width:100%;height:100%;
oder
width:100vw;height:100vh;
Welche ratsam ist, und warum?
Der Vorteil, eine relative Einheit für den Darstellungsbereich verwenden zu können, liegt wahrscheinlich in einer ähnlichen Schriftgröße. Wenn vws oder vhs verwendet werden, sind die Einheiten relativ zum Ansichtsfenster und nicht wie in anderen CSS-Einheiten relativ zu ihrem Eltern- oder Stammelement.
em = relativ zu übergeordneten rem = relativ zu root vw = relativ zur Ansichtsfensterbreite vh = relativ zur Ansichtsfensterhöhe% = relativ zu übergeordneten Elementen.
Wenn Sie also Ihre Schriftgröße auf 10% der Breite des Darstellungsbereichs festlegen möchten, ohne sie in ems, rems oder Pixeln zu berechnen, können Sie einfach font-size: 10vw deklarieren.
vw und Prozent sind nicht identisch, da Prozentangaben relativ zum übergeordneten Container sind. Wenn Sie ein div auf Breite: 50% in einem Container festgelegt haben, der auf 1200px in einem 1400px breiten Fenster eingestellt ist, ist Ihr div 600px breit (1200 * 50%). Mit vws beträgt Ihre Breite jedoch 50% der Größe des Darstellungsbereichs, also 700px (1400px * 50%). Ich habe diesen CodePen gemacht, um den Unterschied zu veranschaulichen.
Hoffnung, das hilft!
Mögliches Duplikat von [CSS Units - Was ist der Unterschied zwischen vh/vw und%?] (Https://stackoverflow.com/questions/31039979/css-units-what-is-the-difference-between-vh -vw-and) –
Das v steht für _viewport_, nur FYI, aber wie es aussieht, ist diese Frage zu breit oder meinungsbezogen. – chazsolo
@chazsolo Ich habe eine Antwort gegeben, die einige Verwendungszwecke mit einem Code-Link erklärt. Lass es mich wissen, wenn du es hilfreich findest :) – Farbs