eingehendes Verst?ndnis von REM-Einheiten in CSS: Eine relativ gro?e Einheit mit ausgezeichneter Browserkompatibilit?t und lernen, wie man sie effektiv einsetzt.

Schlüsselpunkte

1. Verstehen Sie REM -Einheiten: Lernen Sie CSS -REM -Einheiten, die relativ zur Schriftgr??e des Stammelements sind, eine konsistente Methode für die Schriftgr??e und den Abstand in Ihrer Benutzeroberfl?che.
2. Vergleiche REM- und EM -Einheiten: Erforschen Sie den Unterschied zwischen REM- und EM -Einheiten in CSS.
3. Praktische Anwendung und Zug?nglichkeit: Ermitteln Sie die praktische Verwendung von REM -Einheiten in reaktionsschnellem Design, Skalierung von Dokumenten und Sicherstellung der Zug?nglichkeit der Netzwerke, sodass Benutzer die Schriftgr??e entsprechend ihren Vorlieben anpassen k?nnen.

Was ist eine REM -Einheit?

In CSS steht REM für "Wurzel EM", eine Messeinheit, die die Schriftgr??e des Wurzelelements darstellt. Dies bedeutet, dass 1REM gleich der Schriftgr??e des HTML -Elements ist und für die meisten Browser die Standardeinstellung 16px ist. Die Verwendung von REM kann dazu beitragen, dass die Schriftgr??e und der Abstand in der Benutzeroberfl?che konsistent sind.

gem?? der W3C -Spezifikation ist die Definition einer REM -Einheit:

ist gleich dem berechneten Wert der Schriftgr??e im Stammelement. Wenn die REM-Einheit in der Eigenschaft der Schriftgr??e des Stammelements angegeben ist, bezieht sie sich auf den Anfangswert der Eigenschaft.

REM -Einheiten und EM -Einheiten

Der Unterschied zwischen REM -Einheiten und EM -Einheiten besteht darin, dass die Schriftgr??e der EM -Einheiten relativ zu ihrem eigenen Element, nicht zu dem Wurzelelement. Daher k?nnen sie kaskadieren und zu unerwarteten Ergebnissen führen. Betrachten wir das folgende Beispiel: Wir m?chten, dass die Liste eine Schriftgr??e von 12px hat, falls die Root -Schriftgr??e der Standard 16px ist:

<code>html {font-size: 100%;}
ul {font-size: 0.75em;}</code>

Wenn wir eine in einer andere Liste verschachtelte Liste haben, betr?gt die Schriftgr??e der internen Liste 75% ihrer übergeordneten Gr??e (9px in diesem Fall). Wir k?nnen dieses Problem immer noch überwinden, indem wir etwas wie:

verwenden

<code>ul ul {font-size: 1em;}</code>

Das funktioniert, aber wir müssen der tieferen Nistsituation noch sehr aufmerksam machen.

Mit der REM -Einheit sind die Dinge viel einfacher:

<code>html {font-size: 100%;}
ul {font-size: 0.75rem;}</code>

Da sich alle Gr??en auf die Root -Schriftgr??e beziehen, ist es nicht mehr erforderlich, Verschachtelf?lle in separaten Erkl?rungen zu verarbeiten.

Verwenden Sie REM -Einheiten für die Gr??e der Schriftgr??e für die Gr??e

Einer der Pioniere der Schriftgr??e, die die Gr??en?nderung mit REM -Einheiten mit REM -Einheiten vergr??erte, war Jonathan Snook, der im Mai 2011 einen Artikel über die Gr??e der Schriftgr??e mit REM ver?ffentlichte. Wie viele andere CSS -Entwickler muss er sich den Problemen mit EM -Einheiten in komplexen Layouts stellen.

Zu dieser Zeit hatten ?ltere Versionen von IE immer noch einen gro?en Marktanteil, und sie konnten den Text mithilfe der Pixelgr??e nicht skalieren. Wie wir bereits gesehen haben, ist es jedoch leicht, die Verschachtelung zu ignorieren und unerwartete Ergebnisse mit EM -Einheiten zu erzielen.

Das Hauptproblem bei der Verwendung von REM für die Gr??e der Schriftgr??e ist, dass diese Werte nicht sehr bequem zu verwenden sind. Schauen wir uns ein Beispiel für einige gemeinsame Schriftgr??en an, die in REM -Einheiten ausgedrückt werden, vorausgesetzt, die Basisgr??e betr?gt 16px:

• 10px = 0,625rem
• 12px = 0,75Rem
• 14px = 0,875rem
• 16px = 1rem (Benchmark)
• 18px = 1,125Rem
• 20px = 1,25Rem
• 24px = 1,5Rem
• 30px = 1,875rem
• 32px = 2rem

Wie wir sehen k?nnen, sind diese Werte nicht bequem für Berechnungen. Snook verwendet also eine Technik namens "62,5%". Dies ist keineswegs eine neue Entdeckung, wie sie in EM -Einheiten verwendet wurde:

<code>html {font-size: 100%;}
ul {font-size: 0.75em;}</code>

Snooks L?sung wird:

Da die REM -Einheit relativ zum Wurzelelement ist, wird Snooks L?sung:

<code>ul ul {font-size: 1em;}</code>

Wir müssen auch andere Browser in Betracht ziehen, die REM nicht unterstützen. Der obige Code ist also tats?chlich so geschrieben:

<code>html {font-size: 100%;}
ul {font-size: 0.75rem;}</code>

W?hrend diese L?sung dem Status der "goldenen Regel" nahe zu sein scheint, empfehlen einige Leute, sie nicht blind zu verwenden. Harry Roberts schrieb seine eigene Meinung über die Verwendung von REM -Einheiten. Obwohl die 62,5% ige L?sung die Berechnung erleichtert (da die Schriftgr??e in PX das 10 -fache des REM -Werts betr?gt), zwingt sie die Entwickler letztendlich, alle Schriftgr??en in ihrer Website explizit neu zu schreiben.

Die dritte Ansicht stammt von Chris Coyier von CSS-Tricks. Seine L?sung verwendet alle drei Einheiten, denen wir derzeit begegnen. Er beh?lt die in PX definierte Wurzelgr??e, in REM -Einheiten definierte Module und Elemente in Modulen in EM -Einheiten bei. Dieser Ansatz erleichtert es, die globale Gr??e zu manipulieren, die die Typen im Modul skaliert, w?hrend der Modulgehalt basierend auf der Schriftgr??e des Moduls selbst skaliert wird. Louis Lazaris diskutierte sp?ter dieses Konzept in "The Power of EM -Einheiten in CSS".

Im folgenden Beispiel k?nnen Sie sehen, wie Chris 'Methode aussieht:

[CodePen Sample Link - Der eingebettete Code von CodePen sollte hier eingefügt werden, aber da ich nicht auf die externe Website zugreifen kann, kann ich ihn nicht bereitstellen. ]

In der Praxis verwenden wichtige Frameworks wie Bootstrap 4 und Materialdesign -Handbuch REM -Einheiten, um den Textinhalt zu ?ndern.

Das, was insbesondere erw?hnt werden muss, ist Material-UI, eine sehr beliebte Sammlung von React-Komponenten. Sie ?ndern nicht nur die Gr??e des Textes auf die gleiche Weise, sondern bieten auch einen Mechanismus, um die zuvor erw?hnte ?10px -Vereinfachung“ zu erreichen.

Ein weiteres aktuelles Projekt, jedes Layout, kombiniert EM- und REM -Einheiten sehr kreativ. Es ist dem oben genannten Modellüberblick über Chris Coyier am n?chsten und verwendet EM -Einheiten, um Inline -Elemente wie SVG -Ikonen, Spannweiten oder ?hnliche Elemente zu betonen.

Wie Sie sehen, gibt es keine "Allzweck" -L?sung. M?gliche Kombinationen sind nur durch die Vorstellungskraft des Entwicklers begrenzt.

Verwenden Sie REMs

In Medienabfrage -Haltepunkten

Die Verwendung von EM- oder REM -Einheiten in Medienabfragen h?ngt eng mit dem Konzept des "besten Pr?sidenten" und ihren Auswirkungen auf die Leseerfahrung zusammen. Das Smashing -Magazin ver?ffentlichte einen umfassenden Forschungsartikel über Web -Typen -Setting mit dem Titel "Gr??e ist wichtig: ausgewogene Linienl?nge und Schriftgr??e im reaktionsschnellen Webdesign." Unter vielen anderen interessanten Dingen enth?lt der Artikel eine Sch?tzung der besten Zeilenl?nge: zwischen 45 und 75-85 Zeichen (einschlie?lich Leerzeichen und Zeichensetzung), wobei 65 der "ideale" Zielwert ist.

Verwenden einer groben Sch?tzung von 1REM = 1-Zeichen k?nnen wir den Textfluss von einzelnen Spalteninhalten unter Verwendung eines mobilen ersten Ansatzes steuern:

<code>html {font-size: 100%;}
ul {font-size: 0.75em;}</code>

Bei Verwendung als Einheiten in Medienabfragen haben REM- und EM -Einheiten jedoch ein interessantes Detail: Sie haben immer den gleichen Wert von 1REM = 1EM = die vom Browser festgelegte Schriftgr??e. Der Grund für dieses Verhalten ist in der Medienabfragespezifikation (hervorgehoben):

Die relativen Einheiten in Medienabfragen basieren auf dem Anfangswert, was bedeutet, dass Einheiten niemals auf dem deklarierten Ergebnis basieren. In HTML wird beispielsweise die EM-Einheit relativ zum Anfangswert der Schriftgr??e nicht vom Benutzeragenten oder den Einstellungen des Benutzers und nicht in jedem Stil auf der Seite definiert.

Schauen wir uns einen kurzen Blick auf ein Beispiel für dieses Verhalten an:

[CodePen Sample Link - Der eingebettete Code von CodePen sollte hier eingefügt werden, aber da ich nicht auf die externe Website zugreifen kann, kann ich ihn nicht bereitstellen. ]

Erstens haben wir in unserem HTML ein Element, in dem wir die Breite des Ansichtsfensters schreiben:

<code>ul ul {font-size: 1em;}</code>

Als n?chstes haben wir zwei Medienabfragen, eine mit REM -Einheiten und die andere mit EM -Einheiten (dies verwendet SASS zum Einfachheit halber):

<code>html {font-size: 100%;}
ul {font-size: 0.75rem;}</code>

Schlie?lich verwenden wir einige JQuery, um die Ansichtsfensterbreite auf der Seite anzuzeigen und den Wert zu aktualisieren, wenn sich die Fenstergr??e ?ndert:

<code>body { font-size:62.5%; } /* =10px */h1 { font-size: 2.4em; } /* =24px */p { font-size: 1.4em; } /* =14px */li { font-size: 1.4em; } /* =14px? */</code>

Wir beginnen mit dem 62,5%% -Wolf -Trick, um zu zeigen, dass die modifizierte Root -Schriftgr??e keinen Einfluss auf die in der Medienabfrage verwendeten Werte hat. Wenn wir die Breite des Browserfensters ?ndern, k?nnen wir feststellen, dass die erste Medienabfrage bei 320px (20 × 16px) beginnt und die zweite Medienabfrage bei 480px (30 × 16px) beginnt. Die von uns deklarierte Schriftgr??e hat keinen Einfluss auf die Haltepunkte. Der einzige Weg, um den Breakpoint -Wert der Medienabfrage zu ?ndern, besteht darin, die Standard -Schriftgr??e in den Browsereinstellungen zu ?ndern.

Daher gibt es tats?chlich keinen Unterschied zwischen der Verwendung von EM- oder REM -Einheiten in den Haltepunkten von Medienabfragen. Die Zurb Foundation (derzeit V6.5.3 zum Zeitpunkt des Schreibens) verwendet EM -Einheiten in Medienfragen.

Barrierefreiheit Verfolgung

Wir haben oben gesehen, dass die Skalierungsf?higkeit basierend auf der Root -Schriftgr??e REM -Einheiten für die Zug?nglichkeit sehr nützlich macht. Google -Entwickler empfehlen, relative Einheiten für die ?nderung der Text?nderung zu verwenden.

Die Mitarbeiter hinter den Internetarchiven führten eine empirische Studie durch, und die Ergebnisse zeigten, dass eine gro?e Anzahl von Benutzern die Standard -Schriftgr??e in ihren Browsereinstellungen ?nderte. Durch die Verwendung von REM- und anderen relativen Einheiten k?nnen Sie die Entscheidungen der Benutzer darüber respektieren, wie sie im Web durchsuchen m?chten.

Skalierungsdokumente mit REM -Einheiten

Skalierung

Die dritte Verwendung, die wir für REM -Einheiten finden k?nnen, besteht darin, skalierbare Komponenten zu erstellen. Durch die Darstellung von Breite, R?ndern und Polsterung in REM -Einheiten k?nnen Sie Schnittstellen erstellen, die mit der Wurzel -Schriftgr??e synchron wachsen oder schrumpfen. Mal sehen, wie dieses Ding mit mehreren Beispielen funktioniert.

[CodePen Beispiel Link 1 - Der eingebettete Code von CodePen sollte hier eingefügt werden, aber da ich nicht auf die externe Website zugreifen kann, kann ich ihn nicht bereitstellen. ]

[CodePen Beispiel Link 2 - Der eingebettete Code von CodePen sollte hier eingefügt werden, aber da ich nicht auf die externe Website zugreifen kann, kann ich ihn nicht bereitstellen. ]

Schlussfolgerung

Wir beenden unsere Begegnung mit der CSS REM -Einheit hier. Es ist offensichtlich, dass die Verwendung dieser Einheiten in unserem Code viele Vorteile hat, wie z. B. Reaktionsf?higkeit, Skalierbarkeit, verbesserte Leserfahrung und eine gr??ere Flexibilit?t der Komponentendefinition. REM -Einheiten sind keine universelle universelle L?sung, aber mit sorgf?ltiger Einsatz k?nnen sie viele der Probleme l?sen, die Entwickler seit Jahren geplagt haben. Es h?ngt von jedem von uns ab, das volle Potential von REMs auszuschalten. Starten Sie Ihren Herausgeber, führen Sie Experimente durch und teilen Sie Ihre Ergebnisse mit dem Rest von uns.

Weitere Informationen zu CSS -Gr??eneinheiten finden Sie unter:

• Verst?ndnis der L?ngeneinheiten in CSS
• Neue CSS3 Relative Schriftgr??e Einheiten
• Die Kraft der EM -Einheiten in CSS

REM ist natürlich nicht die einzige verfügbare CSS -Einheit. Schauen Sie sich unseren CSS -Gr??eneinheitsüberblick an.

FAQs über REM in CSS

Was ist der Unterschied zwischen REM- und EM -Einheiten in CSS?

Der Hauptunterschied zwischen REM- und EM -Einheiten in CSS besteht darin, dass sie den Referenzpunkt der Gr??e berechnen. Die Schriftgr??e der EM -Einheit relativ zu ihrem n?chsten übergeordneten Element. Wenn Sie Elemente nisten, kann jede Ebene je nach Gr??e seines Elternteils unterschiedliche Schriftgr??en aufweisen, was zu einer zusammengesetzten Gr??e führt. Andererseits steht REM für "Root Em". Es ist nur relativ zum Stammelement (HTML), wodurch es überall im Dokument konsistent wird. Dies erleichtert die Vorhersage und Verwaltung von REM -Einheiten in gro?en CSS -Dateien.

Wie kann man Pixel in REM -Einheiten in CSS umwandeln?

Um Pixel in REM -Einheiten umzuwandeln, müssen Sie die Basis -Schriftgr??e des Dokuments, normalerweise 16px (die Standardgr??e für die meisten Browser), kennen. Die Konvertierungsformel lautet: Zielpixelwert/Referenz Schriftgr??e = REM -Wert. Wenn Sie beispielsweise eine Schriftgr??e von 24px wünschen, betr?gt der ?quivalente Wert in REM 24px/16px = 1,5REM.

Kann ich REM -Einheiten für andere Eigenschaften als die Schriftgr??e verwenden?

Ja, REM -Einheiten k?nnen für jedes CSS -Attribut verwendet werden, das einen L?ngenwert erfordert, nicht nur für die Schriftgr??e. Dies umfasst Eigenschaften wie Breite, H?he, Polsterung, Marge und Linienh?he. Die Verwendung von REM -Einheiten für diese Eigenschaften kann dazu beitragen, den proportionalen Abstand und das Layout über verschiedene Bildschirmgr??en aufrechtzuerhalten.

Unterstützen alle Browser REM -Einheiten?

Ja, alle modernen Browser unterstützen die REM -Einheiten, einschlie?lich Chrome, Firefox, Safari, Edge und Internet Explorer 9 und sp?ter. Für ?ltere Browser, die keine REM -Einheiten unterstützen, k?nnen Sie Pixel -Fallback bereitstellen.

Wie k?nnen die Verwendung von REM -Einheiten für reaktionsschnelles Design von Vorteil sein?

REM -Einheiten sind für reaktionsschnelles Design sehr vorteilhaft. Da REM relativ zum Stammelement ist, k?nnen Sie die Gr??e der Root -Schriftart ?ndern, wenn Sie alle in REM definierten Elemente ?ndern. Dies kann in Medienabfragen erfolgen, sodass verschiedene Schriftgr??en für verschiedene Bildschirmgr??en bereitgestellt werden k?nnen, wodurch Ihr Design reagiert.

Welche Auswirkungen haben die Verwendung von REM -Einheiten auf die Zug?nglichkeit?

Die Verwendung von REM -Einheiten kann die Zug?nglichkeit Ihrer Website erheblich verbessern. Einige Benutzer k?nnen die Standard -Schriftgr??e ihrer Browser für eine gr??ere Lesbarkeit anpassen. Da die REM -Einheit relativ zu dieser Benchmark -Schriftgr??e ist, k?nnen das Layout und Abstand Ihrer Website nach den Benutzerpr?ferenzen anpassen und die allgemeine Benutzererfahrung verbessern.

Wie überschreibt ich Stile, die in REM -Einheiten definiert sind?

Sie k?nnen Stile überschreiben, die in REM -Einheiten definiert sind, indem Sie die CSS -Spezifit?t oder wichtige Regeln verwenden. Es wird jedoch empfohlen, diese Methoden mit Vorsicht zu verwenden und stattdessen Ihr CSS auf eine Weise zu erstellen, die die Notwendigkeit einer Abdeckung minimiert.

Kann ich REM -Einheiten in Kombination mit anderen Einheiten wie Pixel oder Prozents?tzen verwenden?

Ja, REM -Einheiten k?nnen in Kombination mit anderen Einheiten wie Pixeln oder Prozents?tzen verwendet werden. Dies kann eine gr??ere Flexibilit?t für Ihr Design bieten. Beispielsweise k?nnen Sie Pixel für die Randbreite verwenden (keine Skalierung mit Textgr??e) und REM -Einheiten für die Füllung (ben?tigt).

Wie setzen Sie die Basis -Schriftgr??e von REM -Einheiten ein?

Die Basis-Schriftgr??e der REM-Einheit wird unter Verwendung der Eigenschaft der Schriftgr??e im Stammelement (HTML) eingestellt. Wenn Sie beispielsweise die Benchmark-Schriftgr??e 10px haben m?chten, k?nnen Sie: HTML {Schriftgr??e: 10px; Alle REM -Einheiten sind dann relativ zu dieser Gr??e.

Was sind die Best Practices für die Verwendung von REM -Einheiten in CSS?

Einige Best Practices für die Verwendung von REM -Einheiten in CSS umfassen: Setzen Sie eine angemessene Basis -Schriftgr??e auf dem Stammelement; Verschiedene Schriftgr??en, um sicherzustellen, dass es zug?nglich und visuell ausgeglichen ist.

Das obige ist der detaillierte Inhalt vonREM in CSS: REM -Einheiten verstehen und verwenden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!