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
Artikel empfehlen
MySQL-Gruppierungsabfragen und Aggregatfunktionen
Überblick Ich glaube, dass wir häufig auf solche ...
Notieren Sie einen Fehlerbehebungsbericht für die hohe CPU-Auslastung des Tomcat-Prozesses
Dieser Artikel zeichnet hauptsächlich einen Tomca...
Wie CSS die Zeit des weißen Bildschirms während des ersten Ladens beeinflusst
Rendering-Pipeline mit externen CSS-Dateien In de...
Detaillierte Erklärung des Java-Aufrufs von ffmpeg zum Konvertieren des Videoformats in flv
Detaillierte Erklärung des Java-Aufrufs von ffmpe...
Mein CSS-Framework – base.css (Browser-Standardstil zurücksetzen)
Code kopieren Der Code lautet wie folgt: @Zeichen...
Lösung für das Problem der verstümmelten Webseiten, wenn die Kodierung auf UTF-8 eingestellt ist
Als ich kürzlich Webseiten mit PHP schrieb, habe i...
Detaillierte Erläuterung der MySQL-Mehrtabellenabfrage
Die Zeit vergeht immer überraschend schnell, ohne...
Detaillierte Erläuterung verschiedener Speichermethoden von Docker-Containern
Inhaltsverzeichnis Vorne geschrieben Mehrere Spei...
So zeigen Sie JSON-Daten auf einer HTML-Seite an und formatieren sie
JSON-Daten werden auf der HTML-Seite angezeigt un...
Detaillierte Erklärung zu React Hooks
Inhaltsverzeichnis Was sind Hooks? Klassenkompone...
Vue erzielt den Top-Effekt durch V-Show
html <div Klasse="nach oben" v-show=...
Implementierung der Funktion zum Speichern von Screenshots aus HTML in PDF
Technologie nutzen itext.jar: Konvertiert den Byt...
Beschreibung und Verwendung der Tabellenattribute CellPad, CellSpace und Border bei der Webseitenerstellung
„Cellspacing“ ist der Abstand zwischen den Zellen ...
So entfernen Sie die Unterstreichung eines Hyperlinks anhand von drei einfachen Beispielen
Um die Unterstreichung eines Hyperlinks zu entfern...