So wählen Sie die beste CSS-Einheit aus, um bessere Website-Layouts zu erstellen

CSS-Einheiten sind einer der grundlegendsten Aspekte, die beim Erstellen eines Website-Layouts berücksichtigt werden müssen. Diese Einheiten definieren, wie Ihr Design auf verschiedenen Geräten interagiert.

Aber wenn es um CSS-Einheiten geht, stehen viele Optionen zur Auswahl und nicht alle Optionen sind gleich. CSS-Einheiten sind nicht nur auf Schriftarten beschränkt, daher sollten Sie als Frontend-Entwickler auch verstehen, wie sich diese Einheiten auf Layouts auswirken.

In diesem Artikel zeigen wir Ihnen, wie verschiedene CSS-Einheiten funktionieren, damit Sie sie verwenden können, um bessere Layouts und Website-Designs zu erstellen.

Arten von CSS-Einheiten

CSS-Einheiten können in die folgenden Kategorien unterteilt werden:

• Absolute Einheiten
• Relative Einheiten der Schriftart
• Relative Einheiten des Ansichtsfensters

Absolute Einheiten

Einige Einheiten hängen von bestimmten absoluten Werten ab und werden von keiner Bildschirmgröße oder Schriftart beeinflusst. Die Anzeige dieser Einheiten kann je nach Bildschirmauflösung variieren, da sie von DPI (dots per inch) des Bildschirms abhängt.

Diese Einheiten sind:

• px (Pixel)
• in Zoll)
• cm (Zentimeter)
• mm (Millimeter)
• PC (pica)
• Punkt (Punkte)

Pixel

Pixel sind die am häufigsten verwendete und akzeptierte Einheit. Und es gilt als Messgrundlage für viele andere Einheiten. Es liefert das konsistenteste Ergebnis unter verschiedenen Geräten.

Das box Element im folgenden Beispiel hat eine Höhe von 150 Pixel und eine Breite von 150 Pixel und bleibt auf allen Bildschirmgrößen gleich.

[CSS]
.Kasten{
Höhe: 150 Pixel;
Breite: 150 Pixel;
}
[/css]

Alle anderen absoluten Einheiten wie in (Zoll), cm (Zentimeter) und mm (Millimeter) sind reale Maßeinheiten mit sehr wenigen realen CSS-Anwendungsfällen.

Es ist jedoch immer noch gut, ihre Beziehung zu Pixeln zu verstehen, also vergleichen sie sich so:

• 1 Zoll = 96 Pixel
• 1cm = 37,8px
• 1 mm = 3,78 Pixel

Während pc (Picas) und pt (Punkte) direkt mit Zoll zusammenhängen.

• 1 Zoll = 72pt
• 1in = 6pc

Die Beziehung zwischen allen absoluten Einheiten kann wie folgt demonstriert werden:

Rem

Abgesehen von Pixeln haben alle anderen absoluten Einheiten nur sehr wenige bis gar keine Anwendungsfälle für Bildschirm-CSS, aber da es sich um reale Maßeinheiten handelt, können sie effektiv in Druck-CSS verwendet werden. (Falls Sie sich über Pixel wundern, sie funktionieren auch gut in Druck-CSS!)

Relative Einheiten der Schriftart

Es gibt einige Einheiten, die von der Schriftgröße oder Schriftfamilie des Dokuments oder seiner übergeordneten Elemente abhängen. Dazu gehören Einheiten wie:

• em
• Rest
• ex
• CH

Em

Em ist eine relative Längeneinheit; es hängt von der Schriftgröße des übergeordneten Elements oder des Dokuments ab. Standardmäßig entspricht 1em 16px , wenn keine font-size definiert ist.

Em erbt die Größe von der Schriftgröße seines unmittelbaren Elternteils. Wenn also ein übergeordnetes Element font-size:18px hat, dann wird 1em für alle untergeordneten Elemente als 18px gemessen.

Hier haben wir eine div .post mit drei untergeordneten Elementen, .post-item , mit einem Titel und etwas Text.

[html]
<div class="post">
<div class="post-item">
<h2>Titel</h2>
Lorem Ipsum ist einfach Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist seit dem 16. Jahrhundert der branchenübliche Dummy-Text
</div>
<div class="post-item">
<h2>Titel</h2>
Lorem Ipsum ist einfach Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist seit dem 16. Jahrhundert der branchenübliche Dummy-Text
</div>
<div class="post-item">
<h2>Titel</h2>
Lorem Ipsum ist einfach Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist seit dem 16. Jahrhundert der branchenübliche Dummy-Text
</div>
</div>
[/html]

Jetzt hat das übergeordnete .post eine font-size:20px und das untergeordnete Element .post div hat seine eigene font-size:1.2em mit padding:0.75em und margin:0.75em , sodass die berechnete Auffüllung und der Rand 18 Pixel (20 Pixel) betragen *1,2em*0,75em).

[CSS]
html{
Schriftgröße: 20px;
}

.Post{
Schriftgröße: 20px;
}

.post div{
Schriftgröße: 1,2 em;
}

.post-item{
Hintergrund:rosa;
Polsterung: 0,75 cm;
Rand: 0,75 em;
}

.post-item h2{
Schriftgröße: 1,5 em;
Rand: 0,5 em 0;
}

.post-item p{
Rand: 0;
Schriftgröße: 1em;
}
[/css]

Wie Sie sehen können, erben die untergeordneten Elemente Werte vom übergeordneten Element.

Der Vorteil der Verwendung von em besteht darin, dass Sie, wenn Sie sich entscheiden, die font-size , padding und margin jedes Elements proportional zu ändern, nur die Schriftgröße des übergeordneten Elements ändern müssen, und alle anderen Elemente werden entsprechend angepasst.

Bei absoluten Einheiten wie px, bei denen Sie jedes Element einzeln anpassen müssen, ist dies nicht der Fall.

Diese Art der Vererbung kann jedoch etwas schwierig zu handhaben sein, wenn verschachtelte Elemente auch in em ihre eigene font-size haben.

Wie in der vorherigen Demo werden Sie seltsame Ergebnisse sehen, wenn Sie den Titel und den Absatz in ein anderes div in einem der untergeordneten Elemente einschließen.

[html]
<div class="post-item">
<div>
<h2>Titel</h2>
Lorem Ipsum ist einfach Blindtext der Druck- und Satzindustrie. Lorem Ipsum ist seit dem 16. Jahrhundert der branchenübliche Dummy-Text
</div>
</div>
[/html]

Da post-item ein verschachteltes div hat, ändert sich die Basisgröße von 24px auf 28,8px (20px*1.2em*1.2em) und die font-size und margin für h2 ändern sich auf 43.2px (20px*1.2em*1.2em *1,5em) bzw. 14,4px (20px*1,2em*1,2em*0,5em).

Rem

Rem kann in solchen Situationen sehr hilfreich sein, da sie sich immer auf die Schriftgröße des Stammelements beziehen, nicht auf das übergeordnete Element.

Wenn Sie das vorherige Beispiel nehmen und die Einheiten von em in rem für .post div ändern, sehen Sie, dass sich alle untergeordneten Elemente selbst reparieren.

[CSS]
.post div{
Schriftgröße: 1,2 rem;
}
[/css]

Sobald die Einheit von em zu rem geändert wird, ändert sich ihre Basis vom übergeordneten div zum Stammelement, das eine front-size:20px hat.

Die Berechnung lautet also 20px*1.2rem*value und h2 und p haben beide eine konsistente font-size und einen einheitlichen margin , unabhängig von ihrem übergeordneten Element.

Ex

Ex ist relativ zur x-Höhe der aktuellen Schriftart und wird sehr selten verwendet. Die Messung der x-Höhe ist nicht konsistent; manchmal kommt es von der Schriftart selbst und manchmal berechnet sich der Browser selbst.

Wie bei em und rem hängt es von der Schriftart ab, aber der Hauptunterschied besteht darin, dass sich ex ändert, wenn Sie auch die font-family ändern, was bei den anderen beiden nicht der Fall ist.

[CSS]
.Kasten{
Breite:150ex;
Höhe: 150ex;
}
[/css]

CH

Ch ist ähnlich wie ex, hängt aber nicht von der x-Höhe ab; sondern auf die Breite des Zeichens Null (0). Es ändert sich auch mit font-family .

[CSS]
.Kasten{
Breite: 150 Kanäle;
Höhe: 150ch;
}
[/css]

Ansichtsfenster Relative Einheiten

Es gibt einige Einheiten, die von der Höhe und Breite des Ansichtsfensters abhängen, wie zum Beispiel:

• vh (Ansichtsfensterhöhe)
• vw (Ansichtsfensterbreite)
• vmin (Minimum des Darstellungsbereichs)
• vmax (Maximum des Darstellungsbereichs)

Vh

Vh (Ansichtsfensterhöhe) wird als 1vh gleich 1 % der Höhe des Ansichtsfensters gemessen. Diese Einheit ist sehr nützlich, um Elemente in voller Höhe zu erstellen. Vh reagiert ähnlich wie Prozent, hängt aber nicht von der Höhe des übergeordneten Elements ab.

Sie können vh überall verwenden, aber der häufigste Anwendungsfall von vh ist das Erstellen von Elementen mit voller Höhe. In diesem Beispiel erstellt die Klasse full-height einen blauen Container, der 100 % der Höhe des Darstellungsbereichs entspricht.

[CSS]
.vollständige Höhe{
Höhe: 100 vh;
Hintergrund:blau;
}
[/css]

Vw

Vw (Ansichtsfensterbreite) ist ähnlich wie vh, berücksichtigt aber eher die Breite als die Höhe des Ansichtsfensters. 1vw entspricht 1 % der Breite des Ansichtsfensters. Diese Einheiten können sehr hilfreich sein, wenn Sie ein ansprechendes Ansichtsfenster basierend auf Typografie erstellen möchten.

In diesem Beispiel beträgt font-siz von h1 6 % der Breite des Ansichtsfensters. Wenn die Breite des Ansichtsfensters also 1000 Pixel beträgt, beträgt die Schriftgröße 60 Pixel, und wenn das Ansichtsfenster 500 Pixel beträgt, beträgt die Schriftgröße 30 Pixel.

[CSS]
h1{
Schriftgröße: 6vw;
}
[/css]

Vmin

Vmin wird auf der Grundlage des Mindestwerts der Breite oder Höhe des Ansichtsfensters berechnet, je nachdem, welcher Wert kleiner ist. Angenommen, Sie haben eine Ansichtsfenstergröße von 1000 Pixel hoch und 800 Pixel breit. 1vmin entspricht 8px.

Vmax

Vmax wird genau entgegengesetzt zu vmin berechnet, wobei der Maximalwert des Ansichtsfensters berücksichtigt wird.

Wie im vorherigen Viewport-Beispiel mit einer Höhe von 1000 Pixel und einer Breite von 800 Pixel entspricht 1vmax 10 Pixel.

Sehen wir uns nun an, wie Sie vmin und vmax effektiv nutzen können. Angenommen, wir möchten in unserem vorherigen Beispiel eine fließende Polsterung und einen Rand haben, die jetzt auf der Größe des Ansichtsfensters basieren, anstatt auf einem festen Wert.

In diesem Code-Snippet habe ich das Padding auf 3vmax und den Rand auf 1.5vmin gesetzt.

[CSS]
.post-item{
Hintergrund rosa;
Polsterung: 3vmax;
Marge: 1,5 vmin;
}
[/css]

Die Polsterung und der Rand ändern sich entsprechend der Größe des Ansichtsfensters.

Prozent (%) Einheit

Die Prozenteinheit (%) gehört zu keiner der oben genannten Kategorien, kann aber als relative Einheit kategorisiert werden. Es ist relativ zu seinem übergeordneten Element.

Der Prozentsatz ist in erster Linie mit der Höhe und Breite eines Elements verbunden, kann aber überall dort verwendet werden, wo CSS-Längeneinheiten erlaubt sind.

Der Prozentsatz ist eine der nützlichsten Einheiten zum Erstellen eines responsiven oder flüssigen Layouts. Beliebte Frameworks wie Bootstrap, Foundation und Bulma verwenden Prozentsätze für ihr Basislayout.

Hier hat die Klasse full-width die Breite von 100 % ihres übergeordneten Elements.

[CSS]
.Gesamtbreite{
Breite: 100 %;
}
[/css]

Abschluss

Wir haben fast alle verfügbaren CSS-Einheiten behandelt. Abhängig von Ihren Zielen sind einige besser geeignet als andere. Als Frontend-Entwickler ist es immer gut, seine Möglichkeiten zu kennen, denn man weiß nie, welche man in seinem nächsten Projekt braucht.

Welche Einheiten verwenden Sie also am häufigsten, um das gewünschte Ergebnis zu erzielen? Lassen Sie es uns im Kommentarbereich unten wissen!