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
So erfassen Sie Ausnahmen in React
Inhaltsverzeichnis Vorwort Fehlergrenze Jenseits ...
Implementierung des Tomcat-Bereitstellungsprojekts und Integration mit IDEA
Inhaltsverzeichnis 3 Möglichkeiten zum Bereitstel...
Eine kurze Diskussion über die Unterschiede und eine Zusammenfassung der drei Gleitkommatypen Float, Double und Decimal in MySQL
Die Speichergröße und der Bereich jedes Gleitkomm...
Detaillierte Erläuterung der Verwendung von binlog2sql zum schnellen Rollback nach einem MySQL-Fehler
Vorwort Bei der täglichen Arbeit oder beim Studiu...
9 Tipps zur MySQL-Datenbankoptimierung
Inhaltsverzeichnis 1. Wählen Sie die am besten ge...
Detaillierte Erklärung der JavaScript-Prototypenkette
Inhaltsverzeichnis 1. Konstruktoren und Instanzen...
Detaillierte Erklärung der CSS-Float-Eigenschaft
1. Was ist Floating? Floaten bedeutet, wie der Na...
Implementierung der ELK-Bereitstellungsmethode mit einem Klick in Docker Compose
Installieren Filebeat hat Logstash-Forwarder voll...
Vue-Implementierungsbeispiel mit Google Recaptcha-Verifizierung
In unserem aktuellen Projekt müssen wir die Googl...
JavaScript-Flusskontrolle (Schleife)
Inhaltsverzeichnis 1. for-Schleife 2. Doppelte fo...
Was sind die neuen Funktionen von Apache Spark 2.4, das 2018 veröffentlicht wird?
Dieser Artikel stammt vom Apache Spark Meetup, da...
mysql5.7.18 dekomprimierte Version zum Starten des MySQL-Dienstes
Die dekomprimierte Version von mysql5.7.18 starte...
Beispiel für die Konvertierung eines eindimensionalen JS-Arrays in ein dreidimensionales Array
Heute habe ich gesehen, wie ein Freund im Q&A...
Zusammenfassung mehrerer häufig verwendeter CentOS7-Images basierend auf Docker
Inhaltsverzeichnis 1 Docker installieren 2 Konfig...
Node.js erstellt ein einfaches Crawler-Case-Tutorial
Vorbereitung Zuerst müssen Sie nodejs herunterlad...