Px vs. Em vs. Rem: Welche CSS-Einheit sollten Sie verwenden?

Sie werden einige CSS-Einheiten zum Anpassen der Schriftgröße von Text beim Erstellen von Webseiten lernen. Es gibt viele Einheiten wie pt, pc, ex usw., aber in den meisten Fällen sollten Sie sich auf die drei beliebtesten Einheiten konzentrieren: px, em und rem. Viele Entwickler verstehen normalerweise nicht, was die Unterschiede zwischen diesen Einheiten sind; Nachfolgend finden Sie eine detaillierte Erklärung dieser Einheiten.

Bevor Sie fortfahren, beachten Sie, dass es zwei Arten von Einheitslängen gibt: absolut Und relativ.

Absolute Längen

Die absoluten Längeneinheiten sind festgelegt, und eine Länge, die in einer dieser Einheiten ausgedrückt wird, erscheint als genau diese Größe.

Absolute Längeneinheiten werden für die Verwendung auf dem Bildschirm nicht empfohlen, da die Bildschirmgrößen sehr unterschiedlich sind. Sie können jedoch verwendet werden, wenn das Ausgabemedium bekannt ist, z. B. für ein gedrucktes Layout.

Relative Längen

Relative Längeneinheiten geben eine Länge relativ zu einer anderen Längeneigenschaft an. Relative Längeneinheiten skalieren besser zwischen verschiedenen Wiedergabemedien.

1. Px (Pixel)

Pixel ist wahrscheinlich die am häufigsten verwendete Einheit in CSS und sehr beliebt, wenn es darum geht, die Schriftgröße von Text auf Webseiten festzulegen. Ein Pixel (1px) wird in Printmedien als 1/96 Zoll definiert.

Auf Computerbildschirmen beziehen sie sich jedoch normalerweise nicht auf tatsächliche Maße wie Zentimeter und Zoll, wie Sie vielleicht denken; Sie sind nur klein, aber sichtbar definiert. Was als sichtbar gilt, ist abhängig vom Gerät.

Verschiedene Geräte haben eine unterschiedliche Anzahl von Pixeln pro Zoll auf ihren Bildschirmen, die als Pixeldichte bezeichnet wird. Wenn Sie die Anzahl der physischen Pixel auf dem Bildschirm eines Geräts verwenden würden, um die Größe des Inhalts auf diesem Gerät zu bestimmen, hätten Sie ein Problem damit, dass die Dinge auf Bildschirmen aller Größen gleich aussehen.

Hier kommt das Pixelverhältnis des Geräts ins Spiel. Es ist im Wesentlichen nur eine Möglichkeit zu berechnen, wie viel Platz ein CSS-Pixel (1 Pixel) auf dem Bildschirm des Geräts einnimmt, damit es im Vergleich zu einem anderen Gerät gleich groß aussieht.

Unten ist ein Beispiel:-

<div-Klasse="Container">
<div>
<h1>Dies ist ein Absatz</h1>
<P>
 Lorem ipsum, dolor sit amet consectetur adipisicing elit.
 Reprehenderit incidunt perferendis iure veritatis cupiditate delectus
 Omni an! Officiis praesentium officia, nemo veniam consequatur
 nostrum sunt aliquid ipsam, corporis quas quaerat. Lorem ipsum dolor
 sitzen amet consectetur adipisicing elit. Hic quam beatae voluptatibus
 amet possimus iure impedit mutmaßnda differenceio aliquid debitis, autem
 vel ullam aut, quod corporis ratione atque ducimus dolorum.
</P>
</div>
</div>

.Container {
 Breite: 100 %;
 Höhe: 100vh;
 Anzeige: Flex;
 justify-content: center;
 Ausrichtungselemente: Mitte;
}
.Containerdiv {
 maximale Breite: 500px;
 Polsterung: 5px 20px;
 Rand: 1px grauer Vollton;
 Randradius: 10px;
}
P {
 Schriftgröße: 16px;
}

Ausgang

Das obere Feld zeigt, wie es aussieht, wenn es auf einem größeren Bildschirm wie einem Laptop angezeigt wird, und das untere Feld, wie es aussieht wenn es auf einem kleineren Bildschirm wie einem Telefon angezeigt wird.

Beachten Sie, dass der Text in beiden Feldern dieselbe Größe hat. So funktioniert das Pixel im Grunde. Es trägt dazu bei, dass Webinhalte (nicht nur Text) auf allen Geräten dieselbe Größe haben.

2. Em (M)

Die em-Unit hat ihren Namen vom Großbuchstaben „M“ (em), da die meisten CSS-Units aus der Typografie stammen. Es verwendet die aktuelle Schriftgröße des übergeordneten Elements als Basis. Es kann verwendet werden, um die Schriftgröße eines Elements basierend auf der vom übergeordneten Element geerbten Schriftgröße zu vergrößern oder zu verkleinern.

Angenommen, Sie haben ein übergeordnetes Div mit einer Schriftgröße von 16 Pixel. Wenn Sie in diesem div ein Absatzelement erstellen und ihm eine Schriftgröße von 1em geben, beträgt die Schriftgröße des Absatzes 16px.

Wenn Sie jedoch einem anderen Absatz die Schriftgröße von 2em geben, wird dies zu 32px übersetzt. Betrachten Sie das folgende Beispiel:

<div-Klasse="div-eins">
<p Klasse="ein-em">1 em basierend auf 10px</P>
<p Klasse="zwei-em">2 em basierend auf 10px</P>
</div>
<div-Klasse="div-zwei">
<p Klasse="ein-em">1 em basierend auf 10px</P>
<p Klasse="zwei-em">2 em basierend auf 10px</P>
</div>
</div>

.div-eins {
 Schriftgröße: 15px;
}
.div-zwei {
 Schriftgröße: 20px;
}
.ein-em {
 Schriftgröße: 1em;
}
.zwei-em {
 Schriftgröße: 2em;
}

Ausgang

Sie können sehen, wie em die Textgröße vergrößern kann und wie sie von der aktuellen Schriftgröße beeinflusst wird, die vom übergeordneten Container geerbt wird. Es ist nicht ratsam, em zu verwenden, insbesondere innerhalb komplex strukturierter Seiten.

Bei nicht ordnungsgemäßer Verwendung können Sie auf Skalierungsprobleme stoßen, bei denen Elemente aufgrund einer komplexen Vererbung von Größen im DOM-Baum möglicherweise nicht richtig dimensioniert werden.

3. Rem (Wurzel-Em)

Rem funktioniert fast genauso wie em, aber der Hauptunterschied besteht darin, dass rem nur die Schriftgröße des Stammelements auf der Seite referenziert und nicht die Schriftgröße des übergeordneten Elements. Die Stammschriftgröße ist die Standardschriftgröße, die entweder vom Benutzer in seinen Browsereinstellungen oder von Ihnen, dem Entwickler, festgelegt wurde.

Die Standardschriftgröße eines Webbrowsers ist normalerweise 16px, daher ist 1rem 16px und 2rem 32px. In einem Fall jedoch, in dem die Stammschriftgröße beispielsweise auf 10 Pixel geändert wird; 1rem wird 10px und 2rem wird 20px sein.

Hier ist ein Beispiel, um die Dinge klarer zu machen:

<div-Klasse="div-eins">
<!--EM-->
<p Klasse="ein-em">1 em basierend auf Container (40px)</P>
<p Klasse="zwei-em">2 em basierend auf Container (40px)</P>
<!-- REM -->
<p Klasse="ein-rem">1 Rem basierend auf Root (16px)</P>
<p Klasse="zweif">2 Rem basierend auf Root (16px)</P>
</div>

.div-eins {
 Schriftgröße: 40px;
}
.ein-em {
 Schriftgröße: 1em;
}
.zwei-em {
 Schriftgröße: 2em;
}
.one-rem {
 Schriftgröße: 1rem;
}
.zwei-rem {
 Schriftgröße: 2rem;
}

Ausgang

Wie Sie sehen können, sind die mit REM-Einheiten definierten Absätze völlig ungestört von der in unserem Container deklarierten Schriftgröße und werden streng relativ zu der gerendert Stammschriftgröße, die in der HTML-Elementauswahl definiert ist.

Px vs. Em vs. Rem: Welche Einheit ist die beste?

Em wird aufgrund der Möglichkeit einer komplexen Hierarchie verschachtelter Elemente nicht empfohlen. REM wird im Gegensatz zu PX normalerweise entsprechend mit der neuen Standard-/Basisschriftgröße skaliert, die in den Browsereinstellungen angegeben ist. Dies erklärt, warum Sie REM verwenden sollten, wenn Sie mit Textinhalten auf Ihren Webseiten arbeiten. REM gewinnt das Rennen. Eine bessere Gestaltung und Skalierung Ihrer Inhalte mit REM verleiht Ihrer Website Flair, da es ideal für Website-Ersteller ist. Punktgenaue Messungen Ihrer Inhalte bestimmen das Erscheinungsbild Ihrer Website, Sie müssen jedoch kreativ werden.