ATOZ CSS Schneller Tipp: Vorteile von REM- und EM -Werten

Schlüsselpunkte

• Verwenden von relativen Einheiten wie "EM" zum festen Textgröße sowie des internen und externen Abstands von Elementen ist flexibler als die Verwendung von Pixeln, insbesondere in reaktionsschnellen Projekten. "EM" -Inits können jedoch Probleme mit verschachtelten Elementen verursachen, was dazu führt, dass sie auf jedem Verschachtelungsniveau exponentiell wachsen oder schrumpfen.
• "REM" -Einheit ist eine zuverlässigere Alternative zum Festlegen der Schriftgröße, da sie immer basierend auf der Schriftgröße des Stammelements berechnet wird. Dies vermeidet das exponentielle Wachstum oder das Schrumpfung, das bei der Verwendung von "EM" -Inits in verschachtelten Elementen auftritt.
• Für die Browser -Unterstützung, insbesondere für ältere Versionen von Internet Explorer, können Sie JS -Polyfill- oder PX -Alternativen verwenden. Wenn Sie SASS verwenden, können Sie ein Hybrid -Makro und eine Funktion erstellen, um die erforderliche REM -Größe zu berechnen und automatisch einen Sicherungsplan bereitzustellen.

Dieser Artikel ist Teil unserer ATOZ CSS -Serie. Hier finden Sie andere Einträge für die Serie. Sie können hier die vollständigen Text und Screenshots ihrer entsprechenden Videos (Videos zu :required Pseudoklasse) anzeigen.

Willkommen in unserer Atoz CSS -Serie! In dieser Serie werde ich verschiedene CSS -Werte (und Eigenschaften) untersuchen, die jeweils mit unterschiedlichen Buchstaben im Alphabet beginnen. Wir wissen, dass manchmal Screenshots nicht ausreichen. In diesem Artikel haben wir einige schnelle Tipps zur Verwendung von REM- und EM -Werten hinzugefügt.

r steht für REM und EM

Im ersten Screenshot-Video haben wir die :required Pseudo-Klasse erfahren, die verwendet werden kann, um Formulare zu stylen, in denen Felder gefüllt werden müssen.

Formulare, Überprüfung und Stilstatus sind wichtige Themen, aber wir haben nicht viel verpasst, als wir zum ersten Mal :required besprochen haben. Schauen wir uns also ein paar schnelle Tipps für die Verwendung der REM -Messeinheit an. Aber schauen wir uns zunächst eine andere relative Einheit an: Em.

Vor- und Nachteile der Verwendung von Em

Bei der Arbeit mit reaktionsschnellen Elementen ist es flexibler als die Verwendung von Pixeln, wenn Sie mit reaktionsschnellen Elementen relativen Einheiten wie EM einstellen, um die Textgröße sowie der interne und externe Abstand von Elementen festzulegen. Dies liegt daran, dass diese Einheit die Größe, den Abstand und den Textinhalt des Elements proportional mit der Schriftgröße des übergeordneten Elements relativ zur Schriftgröße seines übergeordneten Elements wachsen kann.

Verwenden Sie diese relativen Einheiten. Sie können ein Skalensystem erstellen, bei dem das Ändern des Schriftgrößenwerts eines Elements einen Kaskadeneffekt auf die darin enthaltenen untergeordneten Elemente hat. Das proportionale System ist eine gute Sache, aber dieses Verhalten von EM hat Nachteile.

Betrachten Sie den folgenden HTML -Code -Snippet:

<ul>
  <li>lorem ipsum</li>
  <li>dolor sit
   <ol>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
   </ol>
  </li>
</ul>

Diese verschachtelte Liste ist nicht die häufigste Sache der Welt, aber sie erscheint wahrscheinlich in Seiten und Bedingungen oder anderen Arten von offiziellen Dokumenten.

Wenn wir möchten, dass das Listenelement hervorsticht, können wir die Schriftgröße auf das 1,5 -fache der 16px -Benchmark -Größe einstellen.

<ul>
  <li>lorem ipsum</li>
  <li>dolor sit
   <ol>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
    <li>lorem ipsum</li>
   </ol>
  </li>
</ul>

Aber dies verursacht Probleme mit verschachtelten LIs, da sie auch das 1,5 -fache der Größe ihrer übergeordneten Elemente haben. Die verschachtelten Gegenstände sind 1,5 -mal höher als 24px als das 1,5 -mal höher als 16px. Das Ergebnis ist, dass jedes verschachtelte Listenelement auf jedem Nistniveau exponentiell wächst. Dies ist möglicherweise nicht das Ergebnis, das der Designer will!

ähnliche Probleme treten auch auf, wenn verschachtelte Elemente und EM -Werte kleiner als 1 sind. In diesem Fall nehmen alle verschachtelten Gegenstände auf jedem Nistniveau ständig ab.

Was sollen wir tun?

Verwenden Sie REM, um die Textgröße

zu setzen

Um zu vermeiden, dass die Schriftgröße zunimmt oder abnimmt, können wir alternative Einheiten verwenden.

Wir können Pixel verwenden, aber wie bereits erwähnt, sind relative Einheiten in reaktionsschnellen Projekten flexibler. Stattdessen können wir REM -Einheiten verwenden, da dies immer auf der Schriftgröße des Stammelements basiert, das im Fall einer Website oder einer Webanwendung normalerweise ein HTML -Element ist. In .SVG- oder .xml -Dokumenten können die Wurzelelemente unterschiedlich sein, diese Arten von Dokumenten liegen jedoch außerhalb unseres aktuellen Bereichs.

Wenn wir REM verwenden, um die Schriftgröße festzulegen, bedeutet dies nicht, dass EM niemals verwendet wird. Ich neige dazu, EM zu verwenden, um die Polsterung im Element so einzustellen, dass der Abstand immer relativ zur Textgröße ist.

Verwenden Sie SASS, um den REM -Browser zu unterstützen

REM -Einheiten werden nur von IE9 und später von unterstützt. Wenn Sie Unterstützung für IE8 (oder früher) benötigen, können Sie JS Polyfill verwenden oder wie folgt eine PX -Alternative bereitstellen:

li {
  font-size: 1.5em; /* 24px/16px */
}

Wenn Sie SASS verwenden, können Sie ein Hybrid -Makro und eine Funktion zum Berechnen der erforderlichen REM -Größe erstellen und automatisch alternative Lösungen bereitstellen.

li {
  font-size: 24px;
  font-size: 1.5rem;
}

Das war's. Einige schnelle Tipps zur Verwendung von REM. Wenn Sie sie in Ihrem aktuellen Projekt nicht verwenden, empfehle ich Ihnen dringend, es auszuprobieren.

FAQ für REM- und EM -Werte in CSS

Was sind die Hauptunterschiede zwischen REM und EM in CSS?

Der Hauptunterschied zwischen REM und EM in CSS besteht darin, dass sie den Referenzpunkt der Größe berechnen. EM die Schriftgröße relativ zu ihrem nächsten übergeordneten Element oder aktuellen Element. Dies bedeutet, dass, wenn Sie Elemente nisten, die jeweils EM verwenden, um die Schriftgröße zu definieren, die Größen verschärft werden und schnell schwer zu kontrollieren sein können. Andererseits ist REM relativ zum Stammelement (oder HTML -Element). Dies bedeutet, dass egal wie tief das Element verschachtelt ist. Wenn Sie seine Schriftgröße mit REM definieren, verweist es auf die Schriftgröße des HTML -Elements und ergibt eine konsistente Größe auf Ihrer Website.

Wann sollte ich REM anstelle von EM in CSS verwenden?

REM wird normalerweise verwendet, wenn Sie eine konsistente und vorhersehbare Größenänderung auf Ihrer Website erstellen möchten. Da REM relativ zum Wurzelelement ist, bleibt die Größenänderung konsistent, egal wie tief Ihr Element verschachtelt ist. Dies ist besonders nützlich, um reaktionsschnelle Designs aufzubauen, bei denen Konsistenz und Vorhersehbarkeit von entscheidender Bedeutung sind. Wenn Sie jedoch ein dynamischeres und skalierbareres Design erstellen möchten, können Sie EM verwenden, wobei die Größe des Elements relativ zu seinem Elternteil ist.

Wie kann man Pixel in REM oder EM in CSS umwandeln?

Um Pixel in REM oder EM umzuwandeln, müssen Sie zunächst die Referenzschriftgröße des Dokuments kennen. Dies wird normalerweise auf dem HTML -Element festgelegt, normalerweise 16px, kann jedoch einen beliebigen Wert haben. Sobald die Referenzschriftgröße bekannt ist, kann der REM- oder EM -Wert berechnet werden, indem der gewünschte Pixelwert durch die Referenzschriftgröße geteilt wird. Wenn Ihre Benchmark -Schriftgröße beispielsweise 16px beträgt und eine Schriftgröße von 24 px ist, beträgt die Berechnung 24/16 = 1,5REM oder 1,5EM.

Können REM- und EM -Einheiten austauschbar verwendet werden?

Während sowohl REM- als auch EM -Einheiten zum Definieren von Größen in CSS verwendet werden können, können sie aufgrund ihrer unterschiedlichen Referenzpunkte nicht austauschbar verwendet werden. REM ist immer relativ zum Stammelement, während EM relativ zum nächsten übergeordneten Element oder zum aktuellen Element ist. Dies bedeutet, dass der gleiche REM- oder EM -Wert je nach verwendetem Kontext zu unterschiedlichen Größen führen kann.

Wie wirkt sich die Browser -Kompatibilität auf die Verwendung von REM- und EM -Einheiten aus?

REM- und EM -Einheiten werden in allen modernen Browsern, einschließlich Chrome, Firefox, Safari und Edge, gut unterstützt. Wenn Sie jedoch ältere Versionen von Internet Explorer (dh 8 oder früher) unterstützen müssen, sollten Sie sich darüber im Klaren sein, dass diese Browser keine REM -Einheiten unterstützen. In diesem Fall müssen Sie möglicherweise einen Pixel -Backup -Plan verwenden oder eine EM -Einheit verwenden, die eine breitere Browserunterstützung bietet.

Wie wirken sich REM- und EM -Einheiten auf die Zugänglichkeit aus?

REM- und EM -Einheiten können die Zugänglichkeit Ihrer Website erheblich verbessern, indem sie die Benutzereinstellungen erleichtert und reagieren. Da diese Einheiten relativ sind, können Benutzer die Basis -Schriftgröße entsprechend ihren Vorlieben anpassen, ohne das Layout zu brechen. Dies ist besonders vorteilhaft für sehbehinderte Benutzer, die möglicherweise die Schriftgröße für eine stärkere Lesbarkeit erhöhen müssen.

Was sind die Best Practices für die Verwendung von REM- und EM -Einheiten?

Eine bewährte Verfahren besteht darin, REM -Einheiten zu verwenden, um Schriftarten, Margen und Polster zu definieren, um die Konsistenz auf der gesamten Website zu gewährleisten. Sie können EM-Einheiten für Elemente verwenden, die mit ihren übergeordneten Elementen wie Dropdown-Menüs oder Tooltips skaliert werden müssen. Es ist auch eine gute Idee, die Benchmark -Schriftgröße als Prozentsatz des HTML -Elements zu definieren, mit dem Benutzer die Benchmark -Schriftgröße entsprechend ihren Vorlieben anpassen können.

Wie funktionieren REM- und EM -Einheiten mit Medienfragen?

REM- und EM -Einheiten können wie jede andere Einheit in Medienabfragen verwendet werden. Da diese Einheiten jedoch relativ sind, können sie Ihre Medienfragen flexibler und reaktionsschneller machen. Wenn Sie beispielsweise Breakpoints mithilfe von EM -Einheiten definieren, werden sie mit der Basis -Schriftgröße skaliert, sodass sich Ihr Layout an die Benutzereinstellungen anpassen kann.

Kann ich REM- und EM -Einheiten für andere Elemente als Text verwenden?

Ja, REM- und EM -Einheiten können für jede Größendefinition in CSS und nicht nur Text verwendet werden. Dies umfasst Breite, Höhe, Füllung, Rand, Grenzbreite und sogar Positionierung. Durch die Verwendung von REM- und EM -Einheiten für diese Eigenschaften kann Ihr Layout flexibler und reaktionsschneller werden.

Wie kann man mit verschachtelten Elementen umgehen, wenn sie EM -Einheiten verwenden?

verschachtelte Elemente können bei der Verwendung von EM -Einheiten eine Herausforderung sein, da die Größen verschärft werden. Eine Möglichkeit, damit umzugehen, besteht darin, die Schriftgröße des verschachtelten Elements auf 1EM zurückzusetzen, was es der Schriftgröße seines übergeordneten Elements gleich macht. Alternativ können Sie REM -Einheiten für verschachtelte Elemente verwenden, um eine Konsistenz bei der Größenänderung sicherzustellen.

Das obige ist der detaillierte Inhalt vonATOZ CSS Schneller Tipp: Vorteile von REM- und EM -Werten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!