Einstellen der Abmessungen in vw- und vh-Einheiten

Ursprünglicher Autor: Jonathan Snook
  • Übersetzung
CSS3 führt neue Einheiten ein. ( Ich habe anscheinend bereits darüber gesprochen. Eng ) Sie haben bereits von px, pt, em und new rem gehört. Schauen wir uns ein paar mehr an: vw und vh.

Häufig sind im Layout Elemente enthalten, die garantiert in das Browser-Ansichtsfenster passen. In der Regel wird dazu JavaScript verwendet. Wir überprüfen die Größe des Ansichtsfensters und passen die Größe der Elemente entsprechend an. Wenn der Benutzer die Größe des Browserfensters ändert, wird der Vorgang wiederholt.

Mit vw / vh können wir die Größe der Elemente relativ zur Größe des Ansichtsfensters festlegen. Die Einheiten vw / vh sind insofern interessant, als 1vw eine Einheit ist, die 1/100 der Breite des Ansichtsfensters entspricht. Um einem Element eine Breite zuzuweisen, die der Breite des Ansichtsfensters entspricht, legen Sie beispielsweise die Breite fest: 100 vw.

Wie man es benutzt


Leuchtkästen sind ein guter Kandidat für die Verwendung von vw und vh, da sie normalerweise relativ zum Ansichtsfenster positioniert sind. Diese Position scheint mir jedoch einfacher zu sein: Das Festlegen der Werte oben, unten, links und rechts ist einfacher, da Sie die Höhe und Breite überhaupt nicht einstellen können .

Mit den neuen Einheiten können Sie die Größe der Elemente festlegen, die sich im normalen Fluss befinden. Zum Beispiel kann ich Screenshots auf einer Seite platzieren. Die Höhe dieser Screenshots sollte die Höhe des Ansichtsfensters nicht überschreiten. Dazu kann ich die maximale Höhe der Bilder einstellen:

img { max-height:95vh; }

In diesem Fall stelle ich die Höhe auf 95 vh ein, um auf dem Bildschirm etwas Platz zu lassen.

Browser-Unterstützung


Wenn rem von fast allen gängigen Browsern, einschließlich IE9, unterstützt wird, lohnt sich das Warten auf vw und vh. Derzeit werden sie nur von Internet Explorer 9 unterstützt.

Referenzen


Technische Spezifikation

Vm Einheiten


Auf Anraten von gd666 habe ich beschlossen, ein wenig hinzuzufügen.
Es gibt eine weitere Ansichtsfenster-Einheit, die im Originalartikel nicht erwähnt wurde. Das ist vm.

vm wird relativ zur Breite oder Höhe des Ansichtsfensters berechnet, je nachdem, welcher Wert kleiner ist. Der kleinere der Werte beträgt 100 Vm. Wenn Sie die Größe eines Ansichtsfensters ändern, ändern sich die in vm angegebenen Abmessungen entsprechend.

Sie können darüber in der Spezifikation lesen. deu

Jetzt auch beliebt: