Vertiefendes Verständnis der Unterschiede zwischen px, rem, em, vh, vw

Absolute Länge

px

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

Relative Länge

Warum brauchen wir relative Länge usw.?

Feste Länge kann unseren aktuellen Bedarf nicht mehr decken.

Zum Beispiel: Wenn wir beispielsweise unseren Bildschirm verkleinern, müssen wir nicht nur die Breite und Höhe unserer Box reduzieren, wir möchten auch die Schriftgröße reduzieren, damit das Benutzererlebnis besser wird. .

rem

Die Berechnungsbeziehung zwischen rem und px

Der Wert von rem ist ein Vielfaches von px

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

rem So ändern Sie die relative Berechnungsbeziehung mit px

Wir können und nur im HTML-Tag (da der HTML-Knoten der Wurzelknoten ist, welches das r in rem :root ist), ändern Sie die Schriftgröße: 32px, so dass 1rem = 32px

Code

<div class="div-rem">rem</div>

/* rem的用法 */
html{
    font-size:16px;  // 1rem = 16px
}
.div-rem{
    width: 10rem;    // 10rem = 10 x 16 = 160px
    height: 10rem;   // 10rem = 10 x 16 = 160px
    font-size: 1rem; // 1rem = 16px
    background-color: #a58778;
}

em

em mit Die Berechnungsbeziehung von px

em-Wert ist ein Vielfaches von px

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

em So ändern Sie die relative Berechnung mit der px-Beziehung

Wir können die Schriftgröße für unser eigenes Element ändern: 32px, also 1em = 32px

Wenn die Schriftgröße für unser eigenes Element nicht festgelegt ist Wir können die Schriftgröße auch für die Größe des übergeordneten Elements festlegen und so den vom eigenen Element (untergeordneten Element) verwendeten em-Wert beeinflussen.

Der Unterschied zwischen rem und em

Das obige ist der detaillierte Inhalt vonVertiefendes Verständnis der Unterschiede zwischen px, rem, em, vh, vw. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!