Was ist em? Einführung und Konvertierungsmethode von em und px

Was ist sie?

„em“ bezieht sich auf die Schrifthöhe und die Standardschrifthöhe jedes Browsers beträgt 16px. Daher gilt für alle nicht angepassten Browser: 1em=16px. Dann 12px=0,75em, 10px=0,625em. Um die Konvertierung der Schriftgröße zu vereinfachen, müssen Sie im Body-Selektor in CSS Font-size=62.5% deklarieren. Dadurch ändert sich der em-Wert in 16px*62.5%=10px, also 12px=1.2em, 10px=1em. Mit anderen Worten, Sie müssen nur Ihren ursprünglichen px-Wert durch 10 teilen und dann em als Einheit verwenden.

em hat die folgenden Eigenschaften:

1. Der Wert von em ist nicht festgelegt;
2. em erbt die Schriftgröße des übergeordneten Elements.

Schritte zum Umschreiben:

1. Deklarieren Sie im Body-Selektor die Schriftgröße „Font-size=62.5%“.
2. Teilen Sie Ihren ursprünglichen px-Wert durch 10 und verwenden Sie dann em als Einheit.
Es ist ganz einfach, oder? Wenn das Problem mit nur den beiden oben genannten Schritten gelöst werden könnte, würde niemand px verwenden. Nach den beiden oben genannten Schritten werden Sie feststellen, dass die Schriftarten auf Ihrer Website größer sind, als Sie gedacht haben. Da der Wert von „em“ nicht festgelegt ist und die Größe des übergeordneten Elements übernimmt, können Sie die Schriftgröße im Inhalts-Div auf 1,2em (also 12 Pixel) festlegen. Anschließend setzt man die Schriftgröße des Selektors p auf 1,2em, aber wenn p ein untergeordnetes Element des Inhalts ist, beträgt die Schriftgröße von p nicht 12px, sondern 1,2em = 1,2 * 12px = 14,4px. Dies liegt daran, dass die Schriftgröße des Inhalts auf 1,2 em eingestellt ist. Dieser em-Wert erbt die Größe des übergeordneten Elementkörpers, die 16px * 62,5 % * 1,2 = 12px beträgt. Da p sein untergeordnetes Element ist, erbt em die Schrifthöhe des Inhalts, die 12px beträgt. 1,2em von p sind also nicht mehr 12px, sondern 14,4px.
3. Berechnen Sie die Em-Werte der vergrößerten Schriftarten neu. Vermeiden Sie wiederholte Angaben zur Schriftgröße, d. h. das oben erwähnte Phänomen von 1,2 * 1,2 = 1,44. Wenn Sie beispielsweise die Schriftgröße in #content als 1,2em deklarieren, kann die Schriftgröße von p beim Deklarieren nur 1em und nicht 1,2em sein, da dieses em nicht jenes em ist. Es erbt die Schrifthöhe von #content und wird zu 1em = 12px.

<<: Erstellen privater Mitglieder in JavaScript

>>: Detaillierte Erläuterung der Installations-, Konfigurations-, Start- und Herunterfahrmethoden des MySQL-Servers

ElementUI implementiert kaskadierenden Selektor

Detaillierte Erklärung des von Ubuntu 20.04 gemeldeten Serviceproblems bei Verwendung von Xshell über eine SSH-Verbindung

Artikel

Detaillierter Prozess der Integration von Docker mit der Idee, Springboot-Anwendungen schnell bereitzustellen

Was ist em? Einführung und Konvertierungsmethode von em und px

ElementUI implementiert kaskadierenden Selektor

Detaillierte Erklärung der gemischten Vererbung in Vue

Probleme bei der Konfiguration von https-Server und Reverse-Proxy mit Nginx unter Windows

Detaillierte Erklärung des von Ubuntu 20.04 gemeldeten Serviceproblems bei Verwendung von Xshell über eine SSH-Verbindung

Detaillierter Prozess der Integration von Docker mit der Idee, Springboot-Anwendungen schnell bereitzustellen

Eine detaillierte Einführung in die Bereitstellung von Seata Docker mit hoher Verfügbarkeit

So verwenden Sie IDEA, um ein Webprojekt zu erstellen und es auf Tomcat zu veröffentlichen

Detaillierte Erklärung, wie Sie den Speicherort der Nginx-Konfigurationsdatei finden

Implementierung von vite+vue3.0+ts+element-plus zum schnellen Erstellen eines Projekts

Verwenden von Vue3 (Teil 1) Erstellen eines Vue CLI-Projekts

Artikel empfehlen

Detaillierte Erläuterung der Verwaltung und Verwendung von Docker Secrets

Detaillierte Schritte zur Installation von Python 3.7 auf CentOS 6.5

Unterschied zwischen var und let in JavaScript

Ein kurzer Vortrag über die Kenntnisse, die Sie für den Einstieg in Vue beherrschen müssen

Einführung in die Verwendung von window.open, einem Sprungmenü, das in einem neuen Fenster geöffnet wird

Implementierung von MySQL Select in der Unterabfrageoptimierung

Zusammenfassung verschiedener Formen der Anwendung von CSS-Stilen in Webseiten

Anweisungen zum Erlernen von Vue

So erstellen Sie eine Datenbank in Navicat 8 für MySQL

Ausführliche Erklärung der Set- und WeakSet-Sammlungen in ES6

Eine einfache Methode zum Ändern der Größe hochgeladener Nginx-Dateien

Beispiele für häufige Nginx-Fehlkonfigurationen

Grundlegende Kenntnisse zur MySQL-Wurmreplikation

Analyse gängiger Anwendungsbeispiele von MySQL-Prozessfunktionen

Implementierung der Nginx-Konfiguration und des Zugriffs auf lokale statische Ressourcen in der Mac-Umgebung