CSS Unit Guide: CSS em, rem, vh, vw und mehr, erklärt

Einheiten

Viele CSS - Eigenschaften wie width, margin, padding, font-sizeusw. nehmen Länge. CSS bietet die Möglichkeit, die Länge in mehreren Einheiten auszudrücken. Die Länge ist eine Kombination aus einer Zahl und einer Einheit ohne Leerzeichen. ZB 5px, 0.9emusw.

Länge

Gemeinsame Längeneinheiten

CSS verwendet mehrere Einheiten, um die Länge auszudrücken. Die älteren, die von allen Browsern unterstützt werden, sind:

  • rem - "r" steht für "root": "root em" -, was der am root-Element festgelegten Schriftgröße entspricht (fast immer).
  • vh und vw - Viele reaktionsschnelle Webdesign-Techniken basieren stark auf prozentualen Regeln. CSS-Prozentmaße sind jedoch nicht immer die beste Lösung für alle Probleme. Das Maß vh entspricht 1/100 der Höhe des Ansichtsfensters. Wenn beispielsweise die Höhe des Browsers 800 Pixel beträgt, entspricht 1 VH 8 Pixel, und wenn die Breite des Ansichtsfensters 650 Pixel beträgt, entspricht 1 VW 6,5 Pixel.
  • vmin und vmax - Diese Einheiten beziehen sich auf den Maximal- oder Minimalwert von vh und vw . Wenn der Browser beispielsweise auf 1200 Pixel Breite und 600 Pixel Höhe eingestellt wäre, wäre 1 Vmin 6 Pixel und 1 Vmax 12 Pixel. Wenn jedoch die Breite auf 700 Pixel und die Höhe auf 1080 Pixel eingestellt wäre, wäre vmin gleich 7 Pixel und vmax 10,8 Pixel.
  • ex und ch - Diese Einheiten, ähnlich wie em und rem , hängen von der aktuellen Schriftart und Schriftgröße ab. Im Gegensatz zu em und rem verlassen sich diese Einheiten jedoch auch auf diese,font-familyda sie auf der Grundlage der für jede Schriftart spezifischen Maßnahmen ermittelt werden. Die ch- Einheit ("Zeicheneinheit") ist definiert als die Breite des Zeichens Null ("0"). Die Ex- Einheit ist definiert als "die aktuelle x-Höhe der aktuellen Schriftart oder die Hälfte von 1em". Die Höhe-x einer bestimmten Schriftart ist die Höhe des Kleinbuchstaben „x“ dieser Schriftart. Es ist oft die mittlere Markierung der Schrift.

Es gibt zwei allgemeine Arten von Einheiten, die in CSS für Länge und Größe verwendet werden: relativ und absolut.

Relative Einheiten

Relative Einheiten ändern sich relativ zur aktuellen Schriftgröße des Elements oder zu anderen Einstellungen. Einige relative Einheiten sind

em

  • die Breite eines Großbuchstabens M des font-sizeaktuellen Elements.
  • Schriftgrößen werden von übergeordneten Elementen geerbt.

Beispiel:

div { font-size: 16px; } div h3 { font-size: 2rem; }

Hier die

wird gleich sein, 32pxda das font-sizedes aktuellen oder übergeordneten Elements ist 16px.

rem

  • root emoder die Breite eines Großbuchstabens M der Standardbasis font-size.
  • Übergeordnete Schriftgrößen haben keine Auswirkung.

Beispiel:

body { font-size: 16px; } p { font-size: 1.5rem; }

Hier die

wird gleich sein, 24pxda die Standardbasis font-sizeist 16px.

%

  • die prozentuale Größe im Verhältnis zur Größe eines Elternteils.

Beispiel:

div { width: 400px; } div p { width: 75%; }

Da die Breite des Elternteils ist 400px, würde die Breite des inneren Pargraphen 300px75% betragen 400px.

vw

  • Ansichtsbreite oder 1/100 der Breite des Ansichtsfensters

Beispiel:

body { width: 100vw; }

Die bodyFüllung ist die Breite des Ansichtsfensters, ob dieser 417px ist, 690px oder jede Breite.

vh

  • Ansichtshöhe oder 1/100 der Höhe des Ansichtsfensters

Beispiel:

div { height: 50vh; }

Dadurch divwird die Hälfte der Höhe des Ansichtsfensters ausgefüllt, unabhängig davon, ob dies 1080px, 1300px oder eine beliebige Höhe ist.

Absolute Einheiten

Die absoluten Einheiten sind unabhängig von der Bildschirmgröße oder anderen Einstellungen gleich. Einige absolute Einheiten sind

px

  • Pixel
  • Die Pixelanzahl hängt von der Qualität des Bildschirms des Anzeigegeräts ab

in, cm,mm

  • Zoll, Zentimeter, Millimeter
  • Ein Zoll ist ein Zoll auf einem kleinen oder einem großen Bildschirm

pt, pc

  • Punkte (1/72 Zoll) und Picas (12 Punkte)

Beispiel

p { font-size: 24px; } div { width: 3in; border-width: 3pt; }

Ein Absatz mit font-size: 24pxwird auf einem Telefon-, Tablet- oder Desktop-Bildschirm als 24 Pixel angezeigt.

Das divwird als 3 Zoll breit angezeigt , und das borderauf dem divwird 3/72 Zoll dick sein, unabhängig von der Bildschirmgröße.