REM in CSS: REM -Einheiten verstehen und verwenden

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!