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

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!