Detaillierte Erklärung zur korrekten Öffnung in CSS

Warum sagen wir „normalerweise 1em=16px“?

Die vom Browser des Benutzers gerenderte Standardtextgröße beträgt „16px“. Mit anderen Worten beträgt die Standardtextgröße des „Body“ und seiner untergeordneten Elemente auf der Webseite im Browser des Benutzers „16px“.
Wir alle wissen: em (und rem ) ist eine relative Einheit! „Relativ“ bedeutet:

• Relative Berechnungen müssen über eine Referenz verfügen. Das Relative bezieht sich hier also auf font-size des übergeordneten Elements. Wenn Sie beispielsweise die Schriftgröße in einem Div auf „16px“ festlegen, erben die untergeordneten Elemente dieses Divs die Schriftgröße, sofern Sie sie in den untergeordneten Elementen nicht explizit erneut festlegen. Wenn der Benutzer die Textgröße über die Benutzeroberflächen-Steuerelemente des Browsers ändert, wird auch unsere gesamte Seite vergrößert (oder verkleinert), sodass die gesamte Seite nicht abstürzt, nachdem der Benutzer die Schriftart des Browsers geändert hat!

Es ist nur so, dass em relativ zum übergeordneten Element ist, während rem relativ zum „Stamm“-Element (html) ist.

Was genau ist „em“?

em: relative Einheit. Sein Basiswert ist die Schriftgröße des aktuellen Elements; der tatsächliche Wert hängt von seinem (geerbten) übergeordneten Element ab.
Nachdem der Autor die Daten konsultiert und kontinuierlich getestet hat, gibt es eine „unbemerkte“ Formel:
Ziel-EM-Wert = Zielpixelwert / Pixelwert des übergeordneten Elements

(↑: Wie em mit dem übergeordneten Element font-size zusammenhängt

<Text>
	Ich bin <p>yunxiaomeng</p>.
</body>

Körper{
	Schriftgröße: 16px;
}
P{
	Schriftgröße: 1,2em;
} 

Sehen Sie den roten Rahmen im Bild? Die tatsächlich gerenderte Größe (Zielpixelwert) des p-Tags beträgt: 16 (px) x 1,2 = 19,2 (px)

Dabei ist Folgendes zu beachten: Wenn ein anderer Selektor/Attribut desselben Elements einen anderen Schriftgrößenwert verwendet, um den vorherigen Wert zu überschreiben, ändert dies den Basiswert des „em“ in dieser Domäne!
Beispielsweise fügen wir dem obigen p ein weiteres Attribut hinzu:

P{
	Schriftgröße: 1,2em;
	Polsterung: 1,2em;
}

Dann beträgt der tatsächlich gerenderte Wert der Polsterung (Zielpixelwert) = 19,2 (px) x 1,2 = 23,04 (px) (also 16 x 1,2 x 1,2):

Aus diesem Grund scheint die tatsächliche Größe möglicherweise nicht Ihren Wünschen zu entsprechen, wenn Sie sie für jede Ebene untergeordneter Elemente festlegen.
(Warum es einen Rand mit demselben Wert wie die Schriftart gibt, erfahren Sie im „Ghost Blank Element“, das in Zhang Xinxus „CSS World“ erwähnt wird!)

Ist das bei REM auch so? !

rem ist auch eine relative Einheit, die sich relativ zum Stammelement ändert.
Es wird auf ähnliche Weise wie em berechnet. Allerdings liegt hier ein „allgemeines Missverständnis“ vor: Generell können wir font-size Wert des Root-Elements dynamisch an die Seitenbreite anpassen, um eine responsive Anpassung zu erreichen:

let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
let htmlDom = document.getElementsByTagName('html')[0];
	
Fenster.onresize = Funktion () {
    htmlDom.style.fontSize=htmlBreite/20+'px';
};

Viele Leute glauben jedoch fälschlicherweise, dass der Rem-Wert der „Seitengröße“ entspricht. Tatsächlich ist das falsch!

Und jetzt ist es durchaus möglich, es über CSS responsiv zu machen:
html { font-size: calc(112.5% + 4 * (100vw - 600px) / 400); } mit Medienabfrage @media

Dies ist das Ende dieses Artikels über die korrekte Art, em in CSS zu öffnen. Weitere relevante Inhalte zum Öffnen von em in CSS finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!