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

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!

<<:  Warum MySQL Repeatable Read als Standardisolationsebene wählt

>>:  Eine sehr detaillierte Erklärung der Linux C++ Multi-Thread-Synchronisierung

Artikel empfehlen

Tutorial zur Installation von RabbitMQ mit Yum auf CentOS8

Geben Sie den Ordner /etc/yum.repos.d/ ein Erstel...

Zwei Möglichkeiten zum Starten des Linux-Bootdienstes

Inhaltsverzeichnis rc.local-Methode chkconfig-Met...

MySQL-Abfrageoptimierung: Eine Tabellenoptimierungslösung für 1 Million Daten

1. Abfragegeschwindigkeit von zwei Abfrage-Engine...

Ausführliche Erklärung des Sperrmechanismus in MySQL InnoDB

Vorne geschrieben Eine Datenbank ist im Wesentlic...

Installieren und verwenden Sie Git und GitHub unter Ubuntu Linux

Einführung in Git Git ist eine Open-Source-Versio...

CentOS6.8 verwendet cmake zur Installation von MySQL5.7.18

Unter Bezugnahme auf die Online-Informationen hab...

Ergänzender Artikel zur Front-End-Performance-Optimierung

Vorwort Ich habe mir die zuvor veröffentlichten A...

Sprechen Sie über wichtige Unterverzeichnisprobleme im Linux-System

/etc/fstab Partitionen/Festplatten automatisch mo...

Detailliertes Tutorial zum Bereitstellen eines Django-Projekts unter CentOS

Grundlegende Umgebung Pagoden-Montageservice [Pyt...

So zeigen Sie die IP-Adresse von Linux in einer virtuellen VMware-Maschine an

1. Doppelklicken Sie zunächst auf das VMware-Symb...