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
Beispiel für die Konvertierung eines flachen JavaScript-Arrays in eine Baumstruktur
Inhaltsverzeichnis 10.000 Daten gingen im Hinterg...
Beispiel für die Bereitstellungsmethode „Forever+nginx“ einer Node-Site
Ich habe vor Kurzem den günstigsten Tencent-Cloud...
Lösung für abnormale Verbindungstabellen, die durch inkonsistente MySQL-Zeichensätze verursacht werden
Inhaltsverzeichnis 1. Lösung 2. MySQL-Zeichensatz...
Lösung für den Fehler beim Importieren von MySQL Big Data in Navicat
Die von Navicat exportierten Daten können nicht i...
Erläuterung des Beispiels für die automatische Anmeldung unter Linux
Es gibt viele Skripte im Internet, die expect ver...
So deinstallieren Sie MySQL 5.7 unter CentOS7
Überprüfen Sie, was in MySQL installiert ist grep...
Detaillierte Erklärung zur Verwendung der Funktionen IF(), IFNULL(), NULLIF() und ISNULL() in MySQL
In MySQL können Sie die Funktionen IF(), IFNULL()...
Detaillierte Erklärung zur Installation der MySQL-Datenbank auf dem Alibaba Cloud Server
Vorwort Da ich während des Lernprozesses Zookeepe...
Erkunden Sie die Implementierung der Datenfreigabe und Methodenfreigabe für JavaScript-Prototypen
Weitergabe von Daten Welche Art von Daten müssen ...
Mounten Sie die Festplatte in einem Verzeichnis unter Ubuntu 18.04
Einführung In diesem Artikel wird beschrieben, wi...
Attribute im Vue V-For-Loop-Objekt
Inhaltsverzeichnis 1. Werte innerhalb von Schleif...
Drei Möglichkeiten zum Weiterleiten des Linux-SSH-Ports
ssh ist eines der beiden Befehlszeilentools, die ...
Die Standard-HTML-Schreibmethode unterscheidet sich von der von Dreamweaver automatisch generierten
Code kopieren Der Code lautet wie folgt: <!--d...
Node.js gibt je nach Anforderungspfad unterschiedliche Daten zurück.
Inhaltsverzeichnis 1. Lernen Sie, je nach Anforde...
Einführung in die MIME-Kodierung (integriert aus Online-Informationen und praktischen Erfahrungen)
1. MIME: Mehrzweck-Internet-Mail-Erweiterungen Da...