Detaillierte Erklärung der Unterschiede zwischen px-, em-, rem-, %, vw- und vh-Einheiten in CSS

1. px

px ist die Abkürzung für Pixel, eine relative Längeneinheit im Verhältnis zur Bildschirmauflösung.

2. em

Als Referenz dient die Schriftgröße des übergeordneten Elements, welches die Eigenschaften der Vererbung besitzt. Die Standardschriftgröße des Browsers beträgt 16 Pixel und 1em ist innerhalb der gesamten Seite kein fester Wert.

Die Schriftgröße beträgt ebenfalls 1,5em, aber der Effekt ist völlig anders. Nach der von W3C bereitgestellten Formel können wir berechnen: Die Schriftgröße des Div mit der Klassen-ID1 wird vom übergeordneten Elementkörper geerbt: 16px*1,5em = 24px Die Schriftgröße des Div mit der Klassen-ID2 wird vom übergeordneten Element-ID1 geerbt: 24px*1,5em = 36px Die Schriftgröße des Div mit der Klassen-ID3 wird vom übergeordneten Element-ID2 geerbt: 36px*1,5em = 54px

3. rem

rem ist eine in CSS3 hinzugefügte relative Einheit, die jedoch nur relativ zum HTML-Stammelement ist. Sie können alle Schriftgrößen proportional anpassen, indem Sie nur das Stammelement ändern. Gleichzeitig wird die Kettenreaktion vermieden, die durch die schichtweise Zusammensetzung der Schriftgrößen entsteht.

4,%

% Prozentsatz, relative Längeneinheit, Prozentwert relativ zum übergeordneten Element

Der Unterschied zwischen Elementbreite und -höhe und Schriftgröße:

(1) Versuchen Sie, relative Größeneinheiten zu verwenden

Wenn Sie zum Messen relative Größeneinheiten verwenden, müssen Sie beim Anpassen des Seitenlayouts nicht alle internen DOM-Strukturen durchlaufen und die Größe interner untergeordneter Elemente zurücksetzen. Wenn sich die Größe mit dem übergeordneten Container oder dem gesamten Seitenlayout ändert, ist es besser, % zu verwenden, beispielsweise zum Festlegen der Höhe und Breite eines Elements.

(2) Versuchen Sie, em und rem für die Schriftgröße zu verwenden

Für die Wartbarkeit und Skalierbarkeit der Schriftgröße wird die Verwendung von em empfohlen. Wenn 3 oder mehr Ebenen mit relativen Schriftgrößeneinstellungen vorhanden sind, können Sie die Verwendung von rem in Betracht ziehen.

5. vw und vh

vm, vh, vmin und vmax sind Ansichtsfenstereinheiten und relative Einheiten. Es ist nicht relativ zum übergeordneten Knoten oder zum Stammknoten der Seite. Stattdessen wird es durch die Größe des Ansichtsfensters mit der Einheit 1 bestimmt, was etwa 1 % entspricht. Der Ansichtsbereich ist der Bereich Ihres Browsers, der tatsächlich Inhalte anzeigt – mit anderen Worten Ihr Webbrowser ohne Symbolleisten und Schaltflächen.

Die konkrete Beschreibung lautet wie folgt:

vw: Prozentsatz der Ansichtsfensterbreite (1vw bedeutet, dass die Ansichtsfensterbreite 1 % beträgt).
vh: Prozentsatz der Ansichtsfensterhöhe
vmin: Nimm den kleineren Wert der aktuellen Vw und Vh
vmax: Nimm den größeren Wert der aktuellen Vw und Vh

vh und vw sind relativ zur Höhe und Breite des Ansichtsfensters. 1vh entspricht 1/100 der Höhe des Ansichtsfensters und 1vw entspricht 1/100 der Breite des Ansichtsfensters. Wenn die Browserhöhe beispielsweise 900px und die Breite 750px beträgt, dann ist 1 vh = 900px/100 = 9px und 1vw = 750px/100 = 7,5px. Es ist einfach, eine Box mit der gleichen Höhe wie der Bildschirm zu erstellen.

calc + vm berechnet die Breite

Breite: 800px; 
Breite: -moz-calc(100vm - (2 * 10)px);
Breite: -webkit-calc(100vm -(2 * 10)px);
Breite: berechnet (100 vm – (2 * 10) px);

Zusammenfassen

Damit ist dieser Artikel mit der detaillierten Erklärung der Unterschiede zwischen px-, em-, rem-, %, vw- und vh-Einheiten in CSS abgeschlossen. Weitere Informationen zu den Unterschieden zwischen px-, em-, rem-, %, vw- und vh-Einheiten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Wir hoffen, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!