Robin Cox
In diesem Beispiel:
DAS CSS
h1 { font-size: 2em; }
.smaller { font-size: 0.5em; }
DAS HTML
<h1>Hi, I am a <span class="smaller">toad</span></h1>
Wird das Wort „Kröte“ 0,5 mal 16 Pixel (die Standardschriftgröße des Browsers) oder 0,5 mal 2em (die Schriftgröße von h1) sein?
Seher
Es ist gleich dem berechnet Wert der Eigenschaft ‘font-size’ des Elements, auf dem es verwendet wird. Die Vererbung läuft den Dokumentenbaum hinunter.
Um Ihre Frage zu beantworten, wäre es das 0,5-fache von 2em, was wiederum das 2-fache wäre, unabhängig von der berechneten Schriftgröße des Elternteils von h1. Puh.
Es ist auch wichtig zu beachten, dass, wenn Sie verwenden em auf andere CSS-Eigenschaften, zum Beispiel width oder heightdas Ergebnis wird aus den berechneten berechnet font-size von welchem Element auch immer Sie das anwenden width oder height zu usw…
Der folgende Artikel beschreibt die Verwendung und den Kontext der em Einheit meiner Meinung nach ziemlich gut, zusammen mit etwas anderem Lesematerial und Ressourcen … rem Einheiten könnten Sie auch etwas interessieren.
Sie können sich auch diese Geige ansehen, um zu sehen, wie sie sich etwas klarer verhält:
Es ist nur die berechnete ‘font-size’-Eigenschaft des Elements, auf dem sie verwendet wird, wenn sie mit einer anderen Eigenschaft verwendet wird. Wenn es für ‘font-size’ selbst verwendet wird, verweist es auf die Eltern berechnete Schriftgröße für die eigene Berechnung.
– BoltClock
15. März 2013 um 11:57 Uhr
Realistischerweise ist es nicht unbedingt der Elternteil, es ist einfach alles, was er erbt, zum Beispiel, wenn der Körper es hatte font-size einstellen 16pxund Sie haben 5 Divs ineinander verschachtelt und beim letzten hatten Sie die Schriftgröße auf eingestellt 2emsein Ergebnis berechnet font-size wäre 32px.
– Seher
15. März 2013 um 11:59 Uhr
Gut ja. In jedem Fall ist es dasselbe, da, wie Sie sagten, die Vererbung den Doctree von Eltern zu Kindern hinunterläuft.
– BoltClock
15. März 2013 um 12:00 Uhr
Das Erbe hat damit nichts zu tun. Die Eigenschaft wird nicht vererbt, wenn ein Stylesheet einen Wert dafür festlegt.
– Jukka K. Korpela
15. März 2013 um 12:15 Uhr
Perfekt, ich scheine das verstanden zu haben 🙂
– Robin Cox
15. März 2013 um 15:01 Uhr
Das em Einheit gibt die Schriftgröße des Elements an, außer wenn sie im Wert von verwendet wird font-size -Eigenschaft, wobei sie die Schriftgröße des übergeordneten Elements angibt. In diesem Sinne ist der Kontext im dargestellten Fall das übergeordnete Element.
Im dargestellten Fall entspricht die Schriftgröße des Wortes „Kröte“ also der Schriftgröße des Elternwortes h1. Aus den angegebenen Daten lässt sich dafür kein konkreter Wert ableiten.
Wenn Schriftgrößen berechnet werden, wird die Schriftgröße des übergeordneten Elements von h1 wurde berechnet, wann dieses Konstrukt behandelt wird; nennen wir es s. Zuerst die Schriftgröße von h1 berechnet, multipliziert s (die Schriftgröße der Eltern) um 2. Dann die Schriftgröße der span -Element wird berechnet, indem die Schriftgröße des übergeordneten Elements mit 0,5 multipliziert wird, was ergibt s. Rundungsfehler könnten bei solchen Prozessen theoretisch zu einer minimalen Abweichung führen, aber bei Computern kann man davon ausgehen, dass die Multiplikation mit 2 und 0,5 exakt ist.
Es wäre das 0,5-fache der 2em des h1-Elements im Kontext.
Um zu erzwingen, dass es relativ zu 16px ist, müssten Sie zuerst das übergeordnete Element von h1 auf die Schriftgröße 16px setzen.
.wrapper{Schriftgröße:16px;} h1 {Schriftgröße: 2em; } .kleiner {Schriftgröße: 0,5em; }
<div class="wrapper"><h1>Hi, I am a <span class="smaller">toad</span></h1></div>
SO in diesem Fall,
Beachten Sie, dass em ein relatives Maß aus dem Kontext ist, der nominell auf der Höhe von M Zeichen in der aktuellen Schriftart basiert. Für alle Absichten hat h1 eine Größe von 32 Pixel und span.smaller eine Größe von 16 Pixel.
oder Sie könnten verwenden rem Einheiten statt em relativ zur Browserbasis sein font-size (natürlich mit allen Problemen der Browserunterstützung)
– Lukas
15. März 2013 um 12:09 Uhr
@Luca – ja, das Support-Problem ist, warum css “reset” existiert und häufig verwendet wird, damit der “Startpunkt” ein konsistenter vorhergesagter Wert ist.
– Mark Schultheiss
15. März 2013 um 12:14 Uhr
Ja, das ist definitiv ein allgemein gültiger Punkt, ich habe mich hauptsächlich darauf bezogen: caniuse.com/rem (Wie üblich steht der IE im Weg!)
– Lukas
15. März 2013 um 12:16 Uhr
@Luca – ja, die Unterstützung für rem ist “noch” nicht universell und wie immer wird / sollte Ihre Verwendung eines “Reset” -CSS auf eine Basis etwas von Ihrer Verwendung abhängen – reines CSS-Styling vs. Codemanipulation vs. was “das meiste” von Ihnen Seitenwunsch ist (rechnerisch ist 10px=1em viel einfacher für das Gehirn als 16px=1em, aber es ist nicht so üblich, dass Ihre Seite tatsächlich 10px-Schriftarten anzeigen soll, also bedeutet die Einstellung auf 10px-Basis (ca. 62,5% von 16px), dass Sie dies tun müssen Stellen Sie viele Dinge von diesen 10px / 1em auf 1,2em ein, um beispielsweise eine 12px-Schriftart zu erhalten – und wir werden die Pica / Point-Sache auf einen anderen Tag verschieben 🙂
– Mark Schultheiss
15. März 2013 um 12:49 Uhr
Standard
Dies hängt von der Pixelgröße des übergeordneten Elements ab. Wenn die Pixelgröße Ihres übergeordneten Elements 16 Pixel beträgt
.5em entspricht der Hälfte Ihres Basispixels, also wird es sein 8px und 2em für h1 wird gleich sein 32px.
Es hängt alles davon ab, wie Sie die Pixelgröße des übergeordneten Elements in Ihrem CSS eingerichtet haben.
Dieser tut meinem Gehirn weh.
– Jefferson
15. März 2013 um 11:52 Uhr
Huch, GUTE Frage! Mein Gehirn schmerzt!
– böse beängstigend
15. März 2013 um 11:53 Uhr
Ich bin mir nicht sicher, wie diese Frage mit RWD zusammenhängt.
– BoltClock
15. März 2013 um 11:55 Uhr
@BoltClock: Das ist es in der Tat. RWD schätzt, indem es Schriftgrößen in Ems und Breiten in Prozent angibt.
– Standard
15. März 2013 um 12:11 Uhr
Ein Blick auf die Registerkarte “berechneter Stil” in Ihrem freundlichen Dom-Inspektor wird Ihnen helfen, diese Berechnungen herauszufinden
– Lukas
15. März 2013 um 12:17 Uhr