Das Konzept von rem (aus dem Englischen. "root em") wird ständig in der Webentwicklung gefunden, insbesondere im Zusammenhang mit der Einstellung von Schriftgrößen und Elementen. Es ist eine absolute Maßeinheit, die auf der Schriftgröße des Stammelements basiert.
In CSS ist rem eine praktische Alternative zu Pixeln und Prozentsätzen, da es Ihnen ermöglicht, ein flexibleres und anpassungsfähigeres Design zu erstellen. Mit rem können Elemente leicht an die Bildschirmgröße des Benutzers angepasst werden, was im Zeitalter mobiler Geräte besonders relevant ist.
Um eine rem zu erstellen, müssen Sie die Schriftgröße des Stammelements in Nicht-rem-Maßeinheiten festlegen. Sie können beispielsweise Pixel (px) oder Prozentsätze (%) verwenden, um die Schriftgröße zu bestimmen. Danach müssen Sie nur noch die Werte in rem berechnen, indem Sie die Formel verwenden: Wert in Pixeln / Schriftgröße des Stammelements.
Mit rem können Sie ansprechende Webseiten erstellen, die auf verschiedene Geräte skaliert werden können. Darüber hinaus bietet dieser Ansatz eine einfache Wartung und Designänderung, da alle Elementgrößen auf einen einheitlichen Wert zurückzuführen sind – die Schriftgröße des Stammelements.
Schritte zum Erstellen von rem
Sie können eine relative Rem-Maßeinheit verwenden, um adaptive Webseiten zu erstellen und die Arbeit mit Maßeinheiten wie Pixeln zu vereinfachen. In diesem Abschnitt werden wir die grundlegenden Schritte untersuchen, die Sie zum Erstellen von rem ausführen müssen.
- Legen Sie die Basisschriftgröße fest. Der empfohlene Wert für die Grundschriftgröße beträgt 16 Pixel.
- Bestimmen Sie mithilfe der grundlegenden Schriftgröße den Wert für rem. Dies kann mit einer einfachen Berechnung erfolgen: Ein Rem entspricht der zugrunde liegenden Schriftgröße. Wenn beispielsweise die Grundschriftgröße 16 Pixel beträgt, entspricht 1 rem 16 Pixel.
- Verwenden Sie rem, um die Schriftgröße, die Breite, den Einzug und andere Eigenschaften von Elementen auf einer Webseite festzulegen. Anstatt Pixel zu verwenden, verwenden Sie einen Wert in rem. Um beispielsweise eine Schriftgröße von 14 Pixeln festzulegen, können Sie den Wert 0.875 rem (14 Pixel/16 Pixel) verwenden.
- Bei Bedarf können Sie Medienabfragen verwenden, um die Grundschriftgröße und damit alle in rem festgelegten Größen zu ändern. Um beispielsweise die grundlegende Schriftgröße auf mobilen Geräten zu erhöhen, können Sie Medienabfragen mit der Bedingung max-width verwenden.
- Testen Sie die Webseite auf verschiedenen Geräten und in verschiedenen Browsern, um sicherzustellen, dass die Verwendung von rem zu den gewünschten Ergebnissen führt. Nehmen Sie gegebenenfalls Anpassungen an den Rem-Werten vor, um eine optimale Anzeige auf allen Geräten zu erzielen.
Wenn Sie diese Schritte befolgen, können Sie Webseiten erstellen, die sich leicht an verschiedene Bildschirme anpassen und die Größe von Elementen mit einer relativen Rem-Maßeinheit leicht ändern können.
Festlegen der Schriftgröße
Eine Möglichkeit, die Schriftgröße in rem-Einheiten festzulegen. Diese Schriftgröße basiert auf der Schriftgröße des root-Elements (Knoten), die standardmäßig auf 16 Pixel festgelegt ist. Wenn wir also die Schriftgröße in rem festlegen, definieren wir sie relativ zur Grundgröße, sodass Sie ein flexibleres und anpassungsfähigeres Design erstellen können.
Führen Sie die folgenden Schritte aus, um die Schriftgröße in rem zu bestimmen:
- Definieren Sie die Basisschriftgröße (z. B. 16px), indem Sie sie in px-Einheiten für das Root-Element festlegen (dies ist normalerweise der Fall ).
- Bestimmen Sie die gewünschte Schriftgröße in rem mithilfe einer Formel:
Schriftgröße in rem = (Gewünschte Schriftgröße in Pixeln) / (Basisschriftgröße in Pixeln)
Wenn wir beispielsweise eine grundlegende Schriftgröße von 16px haben, wenn wir die Schriftgröße auf 20px festlegen möchten, dann:
Schriftgröße in rem = 20px / 16px = 1.25rem
Nachdem Sie die Schriftgröße in rem definiert haben, können Sie sie auf die gewünschten Elemente anwenden, indem Sie einen Wert für die Schriftgröße mit den rem-Einheiten in CSS angeben:
Wenn Sie also die Grundschriftgröße ändern, werden alle in rem festgelegten Schriftgrößen automatisch proportional skaliert, sodass Sie ein responsives Design erstellen können, ohne jede Schriftgröße manuell ändern zu müssen.
Konvertieren von px in rem
Um die Werte in Pixeln (px) in relative Einheiten (rem) umzuwandeln, müssen Sie die für das Tag angegebene Grundschriftgröße kennen .
Ein rem entspricht der Größe der zugrunde liegenden Schriftart. Wenn beispielsweise die Basisschriftgröße auf 16px festgelegt ist, entspricht 1rem 16px.
| Wert in px | Wert in rem |
|---|---|
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
Um einen beliebigen Wert in px in rem zu konvertieren, muss der Wert in px durch die Grundschriftgröße in px geteilt werden. Wenn beispielsweise die Basisschriftgröße 16px ist und der Wert 24px ist, kann 24px als 1.5rem (24 / 16 = 1.5) geschrieben werden.
Der Vorteil der Verwendung relativer Maßeinheiten wie rem besteht darin, dass sie mit einer Änderung der Grundschriftgröße skaliert werden. Wenn Sie die Grundschriftgröße von 16px auf 20px ändern, werden alle rem-Werte automatisch neu berechnet und passen sich an die neue Größe an.
Anwenden von Rem auf ein Dokument
Um rem auf ein Dokument anzuwenden, genügt es, die Schriftgröße für das Stammelement (normalerweise ein Tag) in rem-Einheiten festzulegen. Sie können dann rem verwenden, um die Größe und den Einzug innerhalb des Dokuments festzulegen.
Der Vorteil der Verwendung von rem besteht darin, dass alle Elemente auf der Seite automatisch entsprechend der Schriftgröße des Stammelements skaliert werden. Dies vereinfacht und verbessert die Anpassungsfähigkeit und Zugänglichkeit einer Webseite.
Wenn Sie beispielsweise die Schriftgröße des Stammelements auf 16 Pixel festlegen, beträgt 1rem genau 16 Pixel. Wenn Sie die Schriftgröße auf 24 Pixel festlegen, beträgt 1rem 24 Pixel.
Die Verwendung von Rem während des Umbaus ermöglicht daher die Erstellung adaptiver und skalierbarer Webseiten, die auf verschiedenen Geräten und mit unterschiedlichen Schriftgrößen gut aussehen.
Überprüfung der Idealität
Nachdem Sie Ihr "Rem" -Modell gebaut haben, ist es wichtig, es auf Idealität zu testen.
Die Idealität des Modells bedeutet, dass es die Realität so genau wie möglich widerspiegeln muss.
Möglicherweise müssen Sie das Modell mit anderen vorhandenen Modellen vergleichen, Feedback von Entwicklern oder Benutzern sammeln, Tests durchführen und die Ergebnisse analysieren, um die Idealität eines Modells zu bewerten.
Ein wichtiger Bestandteil der Überprüfung der Idealität ist die Stichprobe der Daten, auf denen die Analyse durchgeführt werden soll.
Denken Sie daran, dass die Idealität eines Modells ein Prozess ist, der ständig daran arbeitet, es zu verbessern.
Ein Modell kann zu einem bestimmten Zeitpunkt als ideal angesehen werden, aber mit der Zeit und der Entwicklung technischer Fähigkeiten können neue Anforderungen und Bewertungskriterien entstehen.
