Die Kraft der EM -Einheiten in CSS

Key Takeaways

• In CSS ist eine EM-Einheit gleich der berechneten Schriftgröße für das Element, auf das die EM angewendet wird. Wenn EM-Einheiten auf Kinderelementen deklariert werden, die keine Schriftgröße definiert haben, erben sie ihre Schriftgröße von ihrem Elternteil oder von einem anderen Vorfahrelement.
• EM-Einheiten funktionieren gut mit modularen CSS-Techniken wie dem Styling auf Komponentenebene oder den eingekapselten Codeabschnitten. Sie können verwendet werden, um sicherzustellen, dass die Elemente einer Komponente relativ zueinander in großer Größe sind und es leicht geändert werden können.
• Die REM -Einheit in CSS erbt immer ihren Wert aus der Einstellung der Basis -Schriftgröße im Stammelement des Dokuments, unabhängig von der berechneten Schriftgröße. Sie könnten REMs verwenden, aber dies bedeutet, dass Sie alle Komponenten auf der Seite mithilfe der Schriftgröße dieses Elements steuern müssen.
• EM -Einheiten bieten mehrere Vorteile gegenüber Pixeln. Sie sind skalierbar, was bedeutet, dass sie basierend auf den Standard -Browsereinstellungen des Benutzers oder den Einstellungen ihres Geräts anpassen. Dies macht Ihre Website für Benutzer mit Sehbehinderungen zugänglicher, die möglicherweise die Schriftgröße erhöhen müssen. EM-Einheiten ermöglichen auch flexibleres und reaktionsschnelles Design, da sie basierend auf der Schriftgröße des übergeordneten Elements anpassen.

Mit jeder komplexen Funktion in CSS haben Sie immer diesen Wendepunkt, wenn Sie sehen, wie mächtig die Funktion ist. Und ob Sie es glauben oder nicht, mein persönlicher Wendepunkt mit EMS kam lange, nachdem ich eine Wortspiele in das Thema geschrieben hatte. Obwohl ich zu diesem Zeitpunkt EMS ziemlich gut verstanden habe, habe ich wirklich angefangen zu sehen, wie mächtig sie sind, als ich Simurais Beitrag über Medium namens Größenkomponenten (Web-) Komponenten las. Ich gehe also in diesem Beitrag mit seinen Coattails. Hier finden Sie eine kurze Einführung in EM -Einheiten, gefolgt von einer Live -Demonstration der von ihm beschriebenen Technik.

Was sind EMS in CSS?

In CSS entspricht eine EM-Einheit der berechneten Schriftgröße für das Element, auf das die EM angewendet wird. Wenn EM-Einheiten auf Kinderelementen deklariert werden, die keine Schriftgröße definiert haben, werden sie ihre Schriftgröße von ihrem Elternteil oder von einem anderen Vorfahren erben und möglicherweise bis zum Stammelement des Dokuments zurückkehren. Schauen Sie sich die folgenden CSS an:

<span><span>.example</span> {
</span><span>font-size: 20px;
</span><span>}</span>

In diesem Fall wäre 1EM zu diesem Element oder zu seinen untergeordneten Elementen (unter der Annahme keine anderen Schriftgröße Definitionen) gleich 20px. Also, wenn wir eine Zeile hinzugefügt haben:

<span><span>.example</span> {
</span><span>font-size: 20px;
</span><span>border-radius: .5em;
</span><span>}</span>

Dieser Grenzwert von 0,5Em Berechnet zu 10px (d. H. 20*.5). Ähnlich:

<span><span>.example</span> {
</span><span>font-size: 20px;
</span><span>border-radius: .5em;
</span><span>padding: 2em;
</span><span>}</span>

Der Polsterwert von 2EM beträgt 40px (20*2). Wie bereits erwähnt, würde diese Art der Berechnung auch für Kinderelemente gelten-es sei denn, eines dieser untergeordneten Elemente hätte einen explizit definierten Wert der Schriftgröße, in diesem Fall würde der EM-Wert basierend darauf berechnet. Wenn in der CSS keine Schriftgröße definiert wird, entspricht die EM -Einheit der Standardschrift des Browsers für das Dokument, das normalerweise 16px ist. Ich denke, das sollte klar machen, wie EMS funktioniert. Schauen wir uns nun an, wie diese Technik verwendet werden kann, um die von Simurai im ursprünglichen mittelgroßen Artikel erläuterten Webkomponenten leicht zu vermeiden. Ich werde seine Idee noch einen Schritt weiter machen, indem ich eine Demo zur Verfügung stelle, um dies in Aktion zu sehen.

Wann wird EM in CSS

verwendet EM-Einheiten passen gut mit modularen CSS-Techniken wie dem Styling auf Komponentenebene oder den eingekapselten Codeabschnitten im Allgemeinen. Beispielsweise können sie verwendet werden, um sicherzustellen, dass die Elemente einer Komponente (z. B. A -Karte) relativ zueinander in großer Größe sind und es leicht zu einer Größe der Größe zulassen. Die Technik funktioniert im Grunde genommen wie folgt: Die Eigenschaft mit Schriftgrößen wird, wie Simurai, als „Trojaner-Pferd“ verwendet und die Grundeinheit für die verschiedenen Elemente in unserer Komponente oder unserem Modul erstellt. Da die EM-Einheiten, wie oben beschrieben, basierend auf der rootdefinierten Schriftgröße des übergeordneten Elements berechnet werden, kann die gesamte Komponente leicht zu sachlich sein, indem einfach die Schriftgröße auf dem übergeordneten Element geändert wird. Schauen wir uns dies in Aktion in einer Codepen -Demo an:

Siehe den Stift mit EMS für setzbare Komponenten von SitePoint (@sinePoint) auf CodePen.

Dieses dumme kleine Modul enthält vier grundlegende Elemente. Nichts Besonderes, nur ein Beispiel, um diese Technik zu veranschaulichen. Bewegen Sie den Range Slider oben auf der Demo -Seite, um die Größe des Moduls zu ändern. Sie können es auch auf dem Vollbildschirm testen. Der Bereich Slider ist auf einen einzelnen Wert auf das Root-Element für die Komponente eingerichtet: den Wert der Schriftgröße. Es ist hier zu beachten, dass der Zweck, die Komponente mithilfe dieser einzelnen CSS -Eigenschaft zu setzlich zu machen, nicht unbedingt so ist, dass der Benutzer dies kann. Es ist hauptsächlich so, dass der Entwickler, der das Modul beibehält, schnell Anpassungen vornehmen kann, ohne mit den verschiedenen Werten in allen Teilen der Komponente zu fummeln. Wie im vorherigen Abschnitt beschrieben, wechselt dies mit der Schriftgröße auf alle EM -Werte, die sowohl auf diesem übergeordneten Element als auch auf alle ihre untergeordneten Elemente festgelegt sind, sodass alle Teile der Komponente proportional flexibel sind. Wenn Sie das CSS untersuchen, werden Sie Folgendes bemerken:

• Alles innerhalb der Komponente ist mit EMS mit Ausnahme der Außenrand (die wir jederzeit bei 2PX bleiben möchten) und das Bild, das ich ändern konnte, wenn wir es wollten, aber ich bin mit seiner Größe zufrieden, dass seine Größe für diesen Fall statisch ist.
• Das tränendropartige Ding in der oberen rechten Ecke ist ein Pseudoelement, der ebenfalls von der Basis-Schriftgröße auf dem Elternteil profitiert.
• Das CSS enthält außerdem zwei Medienabfragen, die die Schriftgröße auf dem übergeordneten Anpassung anpassen. Dies zeigt auch die Nützlichkeit dieser Technik, da Sie nicht alle verschiedenen Größen in den Medienabfragen ändern müssen, sondern nur die Schriftgröße.

Einige Notizen, Fehler usw.

Wie Sie aus der Verwendung des Range Slider in der Demo sehen können, ist diese Art der flexiblen Größenänderung nicht immer etwas, das Sie verwenden möchten. Es kann etwas einschränken. Möglicherweise müssen Sie einige der EM-Werte optimieren, um sie zu erhalten, wie Sie möchten, und wie im Fall der Elterngrenze in der Demo möchten Sie möglicherweise nicht, dass die Größe der Größenänderung auf alle Elemente angewendet wird. Sie können dies einfach überwinden, indem Sie einfach EMS an den Elementen vermeiden, die Sie weglassen möchten. Wie in der Diskussion über den ursprünglichen Artikel von Simurai beschrieben, müssen Sie keine PX-Einheiten verwenden, um die Root-Schriftgröße festzulegen. Dafür können Sie auch EMS verwenden, aber denken Sie daran, dass dies auf die gleiche Weise von seinem übergeordneten Verhältnis vererbt wird, möglicherweise aus dem Standardwert des Dokuments für Schriftarten.

Was ist mit Rems und Sass?

Die REM -Einheit in CSS erbt immer ihren Wert von der Einstellung der Basis -Schriftgröße im Stammelement des Dokuments, unabhängig von der berechneten Schriftgröße. In HTML ist das Stammelement immer das HTML -Element. Sie könnten REMs verwenden, aber dies bedeutet, dass Sie alle Komponenten auf der Seite mithilfe der Schriftgröße dieses Elements steuern müssen. Es könnte an bestimmten Projekten funktionieren, aber ich denke, diese Technik funktioniert am besten, wenn sie die Wiederverhältnis auf eine isolierte Komponente und nicht auf das gesamte Dokument konzentrieren. Für die Verwendung eines Präprozessors wie Sass denke ich, dass dies ein Nebenpunkt ist. Letztendlich verwendet Ihr zusammengestelltes Stylesheet alle Einheiten, die Sie in Ihrem Sass -Code verwenden, und die Erbschaft funktioniert auf die gleiche Weise.

Schlussfolgerung

Wie bereits erwähnt, verdient Simurai die Anerkennung dafür, dass diese Technik allgemein bekannt ist. Natürlich ist dies, wie er erwähnt, nichts Neues und das grundlegende Konzept wird seit Jahren von vielen erfahrenen Entwicklern verwendet - aber vielleicht nicht so sehr im Kontext von Webkomponenten oder Modulen. Wie Simurai sagt, denke ich, dass dies eine schöne Methode ist, um ein CSS -Framework oder eine Bibliothek von Komponenten zu erstellen, und wenn nichts anderes, denke ich, dass die Technik wirklich den Punkt darüber nach Hause macht, wie leistungsstarke EM -Einheiten sind. EM ist natürlich nicht die einzige CSS -Einheit, die verfügbar ist. Schauen Sie sich unseren Überblick über CSS -Größeneinheiten an.

häufig gestellte Fragen (FAQs) zu EM -Einheiten in CSS

Was ist der Unterschied zwischen EM- und REM -Einheiten in CSS? EM ist relativ zur Schriftgröße seines engsten Elternteils oder des aktuellen Elements. Wenn Sie die Schriftgröße eines Elements auf 1,2EM einstellen, beträgt es das 1,2-fache der Größe der Schriftgröße des Elternteils. Andererseits ist REM relativ zur Wurzel oder zum HTML -Element. Wenn Sie also die Schriftgröße eines Elements auf 1,2REM einstellen, beträgt es das 1,2-fache der Größe der Schriftgröße des Stammelements. Dies macht REM vorhersehbarer und leichter zu kontrollierbarer als em.

Wie konvert ich Pixel in EM-Einheiten in CSS? Die Standard-Basis-Schriftgröße in den meisten Browsern beträgt 16px. Wenn Sie also einen Pixelwert in EM konvertieren möchten, teilen Sie den Pixelwert durch die Basis-Schriftgröße. Wenn Sie beispielsweise 18px in EM konvertieren möchten, würden Sie 18/16 = 1.125EM. Sie sind skalierbar, was bedeutet, dass sie basierend auf den Standard -Browsereinstellungen des Benutzers oder den Einstellungen ihres Geräts anpassen. Dies macht Ihre Website für Benutzer mit Sehbehinderungen zugänglicher, die möglicherweise die Schriftgröße erhöhen müssen. EM-Einheiten ermöglichen auch ein flexibleres und reaktionsfähigeres Design, da sie basierend auf der Schriftgröße des übergeordneten Elements anpassen. Dies beinhaltet Eigenschaften wie Breite, Höhe, Polsterung, Marge und Linienhöhe. Die Verwendung von EM-Einheiten für diese Eigenschaften kann dazu beitragen, proportionale Beziehungen in Ihrem Design aufrechtzuerhalten. Wenn Sie beispielsweise möchten, dass die Basis-Schriftgröße 18px ist, würden Sie schreiben: html {Schriftgröße: 18px; }. Alle EM-Einheiten in Ihrem CSS sind dann relativ zu dieser Basis-Schriftgröße. Dies kann zu Compounding -Effekten führen, wobei die Größe des untergeordneten Elements größer oder kleiner wird als erwartet. Um dies zu vermeiden, können Sie REM -Einheiten verwenden, die immer relativ zur Größe des Stammelements sind. Da EM -Einheiten relativ sind, kann sich ihre tatsächliche Größe basierend auf dem Kontext ändern. Dies kann es schwieriger machen, die Größe der Elemente vorherzusagen, insbesondere in komplexen Layouts mit verschachtelten Elementen. CSS folgt einer Spezifitätshierarchie, bei der spezifischere Selektoren weniger spezifische überschreiben. Beispielsweise überschreibt ein ID -Selektor einen Klassenauswahlschalter, und ein Klassenauswahl überschreibt einen Typ -Selektor.

Kann ich EM -Einheiten in Medienabfragen in CSS verwenden?

Ja, Sie können EM -Einheiten in Medienabfragen verwenden. In der Tat kann die Verwendung von EM -Einheiten in Medienfragen die Reaktionsfähigkeit Ihres Designs verbessern. Da EM -Einheiten relativ sind, passen sie sich anhand der Standard -Browsereinstellungen des Benutzers oder den Einstellungen ihres Geräts an. Dies bedeutet, dass sich Ihre Medienabfragen an die Einstellungen des Benutzers anpassen, nicht nur an die Ansichtsfenstergröße. Wenn beispielsweise die Größe des übergeordneten Elements 1,5EM beträgt und die Größe des untergeordneten Elements 2EM beträgt, wäre die tatsächliche Größe des untergeordneten Elements 1,5 * 2 = 3EM. Dies liegt daran, dass die Größe des untergeordneten Elements relativ zur Größe des Elternelements ist.

Das obige ist der detaillierte Inhalt vonDie Kraft der EM -Einheiten in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!