Eine kurze Analyse der Unterschiede zwischen px, rem, em, vh und vw in CSS

Absolute Länge

px

px ist der Pixelwert, also eine feste Länge, wie unsere Meter und Zentimeter.

Relative Länge

Warum brauchen wir relative Längen wie rem, em usw.?

Eine feste Länge kann unseren heutigen Anforderungen nicht mehr gerecht werden.

Beispiel: Wenn wir die Größe unseres Bildschirms reduzieren, müssen wir nicht nur die Breite und Höhe unseres Felds reduzieren, sondern wir möchten auch die Schriftgröße verringern, damit das Benutzererlebnis besser wird.

rem

Die Berechnungsbeziehung zwischen rem und px

Der Wert von rem ist ein Vielfaches von px

Standardmäßig ist die Schriftgröße 16px, also 1rem = 16px

So ändern Sie die relative Berechnungsbeziehung zwischen rem und px

Wir können und können nur die Schriftgröße „font-size: 32px“ im HTML-Tag ändern (weil der HTML-Knoten der Stammknoten ist, der in rem der r:root ist), also 1rem = 32px

Code

<div class="div-rem">rem</div>
/* Verwendung von rem */
html{
    Schriftgröße: 16px; // 1rem = 16px
}
.div-rem{
    Breite: 10rem; // 10rem = 10 x 16 = 160px
    Höhe: 10rem; // 10rem = 10 x 16 = 160px
    Schriftgröße: 1rem; // 1rem = 16px
    Hintergrundfarbe: #a58778;
}

em

Die Berechnungsbeziehung zwischen em und px

Der Wert von em ist ein Vielfaches von px

Standardmäßig ist die Schriftgröße 16px, also 1em = 16px

So ändern Sie die relative Berechnungsbeziehung zwischen em und px

Wir können die Schriftgröße unseres Elements ändern: 32px, also 1em = 32px

Wenn die Schriftgröße für unser Element nicht festgelegt ist, können wir die Schriftgröße auch für das übergeordnete Element festlegen, um den von unserem Element (untergeordnetes Element) verwendeten Em-Wert zu beeinflussen.

Der Unterschied zwischen rem und em

Zusammenfassen

Dies ist das Ende dieses Artikels über die Unterschiede zwischen den Einheiten px, rem, em, vh, vw in CSS. Weitere Informationen zu den Unterschieden zwischen px, rem, em, vh, vw finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!