Wenn Sie ein Website-Stylesheet öffnen, werden Sie auf Rems, Ems oder Pixel oder eine beliebige Kombination davon stoßen. Beim CSS-Styling sind dies die wichtigsten Maßeinheiten, die verwendet werden. Unabhängig davon, ob Sie eine Website von Grund auf neu entwerfen oder eine zuvor gestaltete Website „geerbt“ haben, die Sie pflegen müssen, sind diese für Typografie, Abstände und andere Größen im visuellen Design wichtig.

Was macht eine Maßeinheit besser als eine andere? Es gibt keine eindeutige Antwort, und je nach Situation könnte eine der anderen vorgezogen werden. Wenn Sie den Anwendungsfall kennen und wissen, was am besten funktioniert, können Sie das beste Maß für Ihr Styling bestimmen.

Pixel

Seit den Anfängen des Webs sind Pixel eine Option, die überall in Stylesheets zu finden ist. Sie sind zuverlässig, präzise und in ihrer Konsistenz unerreicht. Pixel werden in allen Browsern unterstützt, was die Arbeit mit ihnen erleichtert.

Obwohl Pixel großartig sind, haben sie einige Einschränkungen. Da es sich um eine solche festgelegte Größe handelt, können Benutzer die Größe des Standardbrowsertexts in den Browsereinstellungen nicht ändern. Die Dinge skalieren nicht wie bei ems und rems, was das Ändern der Größe aus Sicht der Zugänglichkeit für den Benutzer schwierig macht. Man kann argumentieren, dass ein Benutzer einfach hineinzoomen kann, anstatt in die Browsereinstellungen zu gehen. Es gibt keine richtige oder falsche Antwort, es ist nur etwas, das man im Hinterkopf behalten sollte.

Was sind Sie?

Pixel sind eine Maßeinheit, die auf der festgelegten Größe basiert. Sie sind die Einheit zum Messen von Abmessungen auf einem Bildschirm und werden verwendet, wenn ein präzises Design erforderlich ist. Wir sagen Dinge wie „Pixelauflösung“, also sind wir an diese Messung gewöhnt.

Ein Beispiel würde in etwa so aussehen:

.main-header p {
font-size: 14px;
}

Pixel haben ihre Verwendung im Webdesign, aber im Zeitalter des geräteunabhängigen Webdesigns stehen Bildschirmmessungen nicht im Vordergrund. Es dreht sich alles darum, wie wir unsere Inhalte optimal auf unzählige Geräte anpassen können, also gibt es ems und rems, die dabei helfen können.

Ems

Diese Maßeinheit hat eine lange Geschichte. Es geht auf das Jahr 1996 zurück und existiert seit den Anfängen von CSS. Pixel galten als die beste Methode, daher waren Ems in diesen frühen Tagen nicht so beliebt. Sie haben seitdem an Popularität gewonnen, weil ihr Zweck darin besteht, als Einheit zu dienen, die sich auf die Schriftgröße in bestimmten Inhalten bezieht, und sie helfen bei der Konsistenz.

Was sind Sie?

Wenn Sie sich für klassische Typografie interessieren, haben Sie „em“ wahrscheinlich wiedererkannt, weil es eine Maßeinheit ist, die aus der Welt der gedruckten Lettern stammt. Wenn Sie dies als Einheit in der Typografie verwenden, entspricht dieses Maß der aktuell angegebenen Punktgröße. Beispielsweise hat ein Em in einer 16-Punkt-Schrift 16 Punkte. Diese Einheit ist für alle Schriftarten bei einer bestimmten Punktgröße gleich.

Wir reden hier nicht über Print, also wie spielen ems im Webdesign eine Rolle? Die relative Größenanpassung ist ein großes Verkaufsargument für ems, da sie dabei hilft, die Größenanpassung von Elementen in Bezug auf andere Elemente zu steuern. Ems können als großartige Bausteine ​​für Website-Elemente fungieren, da em-Werte zusammengesetzt sind. Es ist jedoch wichtig, wirklich zu verstehen, wie diese Zusammensetzung funktioniert.

Ems verstehen

In den meisten Fällen ist ein em 16 px groß, es sei denn, der Browser ist standardmäßig auf etwas anderes eingestellt. Wenn Sie 1,5 em sehen, wären es 24 Pixel. Es ist jedoch nicht immer so einfach. Was passiert, wenn Nesting involviert ist? Es kann sowohl bequem als auch verwirrend sein. Zu wissen, wie die Dinge bei der Arbeit mit ems funktionieren, wird sicherlich helfen, jedes Rätsel zu lösen. Wie groß ist der Absatz „Ich bin verschachtelt“ unten?

<div class="one">
<div class="two">
<div class="three">
<p>I’m nested</p>
</div>
</div>
</div>

.one, .two {

font-size: 0.5em;

}

.three {

font-size: 2em;

}

Hier gibt es drei divs, und der Absatz ist ziemlich verschachtelt. Bei der Kaskadierung des DOM müssen Sie eventuell etwas Detektivarbeit leisten. Nehmen wir an, wir arbeiten mit einem em von 16px, da dies am häufigsten vorkommt.

Die .one -Klasse multipliziert 1 em mit 0,5, was 0,5 em oder 8 px entspricht. Bei der .two -Klasse wird dies noch einmal mit 0,5 multipliziert, was 0,25 em oder 4px entspricht. Die Dinge werden ziemlich klein, also hilft die Klasse von .three . Wir nehmen die .25 em und multiplizieren diese mit 2. Das Ergebnis ist 0,5 em oder 8px.

Eine Sache, die helfen kann, ist das Festlegen einer Größe für das HTML-Element. So etwas gibt die festgelegte em-Größe an, anstatt sich auf das vom Browser festgelegte em zu verlassen. Lassen Sie uns 1 em auf 20px setzen. Wenn dies mit dem obigen Beispiel verwendet würde, würden die gleichen Prinzipien wie bei der Verschachtelung gelten. Beachten Sie jedoch, dass wir eine Pixelgröße angegeben haben, die sich auf die Möglichkeit auswirkt, den Text mithilfe der Browsereinstellungsoption zu skalieren.

html {

font-size: 20px;

}

Neben Pixeln kann die Schriftgröße auch prozentual eingestellt werden. Der Punkt ist, dass ems neben anderen Maßeinheiten arbeiten kann. Sie werden sicherlich darauf stoßen, da es ziemlich üblich ist, die Körperschriftart auf einen Prozentsatz einzustellen, um eine Grundlinie festzulegen. Nehmen wir an, die Schriftgröße beginnt mit 62,5 % der Em-Größe. Bei einer em-Größe von 16px wäre die Schriftgröße 10px.

body {

font-size:62.5%;

}

Sobald Sie ein Verständnis haben, kann ems eine gute Bereicherung für Ihr Projekt sein. Das Anpassen der Größe des Textes von Unterelementen an ihre übergeordneten Elemente kann sich sicherlich als nützlich erweisen. Außerdem machen es ems einfach, größere Auffüllungen für den Textcontainer anzugeben, als dies bei Wortabständen der Fall ist, sodass er der visuellen Regel der Nähe folgt. Verwandte Elemente werden visuell gruppiert, mit weniger Durcheinander und bieten ein organisiertes Layout.

Ein weiteres großartiges Merkmal von ems sind die Barrierefreiheitsvorteile. Da es relativ zum Stamm des DOM ist, machen ems es perfekt, um die Größe des gesamten Designs basierend auf den Benutzereinstellungen zu ändern. In den Browsereinstellungen können Sie die Standardschriftgröße einfach ändern, was dann die Berechnungen in ems auf die gesamte Website umstellt.

Rest

Was sind Sie?

Rems sind eine ziemlich neue Ergänzung der CSS-Timeline. Diese Maßeinheit wurde mit CSS3 eingeführt und löst einige der Probleme mit Pixeln und Ems. Bei einem Namen, der „ems“ ähnelt, fragen Sie sich vielleicht, wofür das „r“ steht. Es kommt von dem Begriff „Root EM“.

Die Wurzel ist das HTML-Element. Grundlage für diese Messung ist die auf dem HTML-Element angegebene Größenanpassung. Sie werden sehen, dass wir die em-Größenanpassung für das HTML-Element verwendet haben; Es ist in Ordnung, die beiden Messarten zu kombinieren.

html {
font-size: 1em;
}

.one {
font-size: 1.2rem; /* 1.2 x the value set in html */
}

Moderne Browser unterstützen Rems, aber überprüfen Sie unbedingt mit BrowserStack, welche älteren Browser Sie unterstützen müssen, bevor Sie sich für Rems entscheiden. Lassen Sie sich jedoch nicht von älteren Browsern zurückhalten; Sie können immer einen Pixel-Fallback für alles unter IE9 angeben. Moderne Browser ignorieren die Pixel, weil sie Rems bevorzugen. Es könnte etwa so aussehen:

.my-text {

font-size: 24px;

font-size: 1.5rem;

}

Rem verstehen

Erinnerst du dich an die Mathematik, die wir für die verschachtelten Elemente von em machen mussten? Das ist bei rems nicht nötig. Es basiert alles auf diesem Wurzelelement. Wir müssen uns nicht um übergeordnete Elemente kümmern, es basiert immer auf der Wurzel.

<div class="one">
<div class="two">
<div class="three">
<p>I’m nested</p>
</div>
</div>
</div>

html {

font-size: 1em;

}

.one, .two {

font-size: 0.52em;

}

.three {

font-size: 2rem;

}

Hier gibt es drei divs, und der Absatz ist ziemlich verschachtelt, wie wir im em-Beispiel gesehen haben. Nehmen wir wieder an, wir arbeiten mit einer em-Größe von 16px.

Den Klassen .one und .two sind Größen zugewiesen, aber sie spielen hier keine Rolle, da die Verschachtelung von rems nicht so beeinflusst wird wie von ems. Alles, was wirklich zählt, ist das Styling von .three, das sind 2 ems. Der Absatz würde auf dem HTML-Element von 1em basieren. Diese Messung würde verdoppelt werden, was 2 Rems oder 32 Pixel ergibt.

Möchten Sie alles gleichmäßig skalieren? Passen Sie einfach die Größe des Wurzelelements an. Dies ist auch hilfreich, wenn Sie die Standardgröße des Browsers anpassen. Sie konnten sehen, wie ems das zuließ, rems auch.

Es gibt viel weniger Sorgen um unvorhersehbares Verschachtelungsverhalten mit rems. Es ist leicht zu verstehen, wo das Root-Element ins Spiel kommt und wie sich das auf Ihr Styling bei der Verwendung von rems auswirkt.

Wenn man die verschiedenen Messungen vergleicht, sieht man, dass sie ihre Vor- und Nachteile haben. Wenn Sie wirklich verstehen, wie die Maßeinheiten funktionieren und wie sie mit den Browsereinstellungen funktionieren, können Sie auswählen, welche für die Situation oder das Projekt am besten geeignet sind.