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!
