Eine kurze Analyse der Einheiten px, rem und em in CSS

Absolute Länge

px

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

Relative Länge

Warum brauchen wir relative Länge rem em 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 die Schriftgröße = 16px, dann ist 1rem = 16px

rem So ändern Sie die relative Berechnungsbeziehung mit px

Wir können und nur in HTML-Tags (Da der HTML-Knoten der Wurzelknoten ist, also das r in rem: root), ändern Sie die Schriftgröße: 32px, also 1rem = 32px

Code

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

em

Die Berechnungsbeziehung zwischen em und px

Der Wert von em ist ein Vielfaches von px

Standardmäßige Schriftgröße = 16px , dann 1em = 16px

So ändern Sie die relative Berechnungsbeziehung zwischen em und px

Wir können die Schriftgröße unserer eigenen Elemente ändern: 32px, also 1em = 32px

Wenn „font-“ nicht auf die Größe unserer eigenen Elemente festgelegt ist, können wir „font-size“ auch auf dem übergeordneten Element festlegen, um den em-Wert zu beeinflussen, der von unseren eigenen Elementen (untergeordneten Elementen) verwendet wird.

Empfohlenes Tutorial: „CSS-Tutorial“

Das obige ist der detaillierte Inhalt vonEine kurze Analyse der Einheiten px, rem und em in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!