px
px ist ein Pixelwert, der eine feste Länge hat, wie unsere Meter und Zentimeter Gleich.
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. .
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;
}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!
