css mit Adi Prinz

Absolute und relative Einheiten

Die Einheit rem

Die Einheit rem bezieht sich auf die Schriftgröße des Wurzelelements <html>. Bei der üblichen Browser-Standardeinstellung entspricht 1rem normalerweise 16px.

html {
  font-size: 100%;
}

body {
  font-size: 1rem;
}

h1 {
  font-size: 2.5rem;
}

.card {
  padding: 1.5rem;
  border-radius: 0.5rem;
}
    

Die Einheit em

Bei der Eigenschaft font-size bezieht sich em auf die berechnete Schriftgröße des Elternelements. Bei vielen anderen Eigenschaften bezieht sich em auf die Schriftgröße des Elements selbst.

.button {
  font-size: 1rem;
  padding: 0.75em 1.5em;
  border-radius: 0.4em;
}

.button-large {
  font-size: 1.25rem;
}
    

Wird die Schriftgröße der Schaltfläche erhöht, wachsen auch das Padding und der Radius proportional mit.

Prozentwerte

Prozentwerte sind abhängig von der verwendeten CSS-Eigenschaft. Bei einer Breite bezieht sich der Prozentwert normalerweise auf die Breite des umgebenden Blocks.

.wrapper {
  width: 90%;
  max-width: 75rem;
  margin-inline: auto;
}

.content {
  width: 70%;
}

.sidebar {
  width: 30%;
}
    

Prozentwerte ermöglichen flexible Breiten. Abstände, Rahmen und mögliche gap-Werte müssen bei der Gesamtbreite jedoch ebenfalls berücksichtigt werden.

Die Einheit ch

Die Einheit ch orientiert sich an der Breite des Zeichens 0 der verwendeten Schrift. Sie eignet sich besonders zur Begrenzung von Textzeilen.

.text-content {
  max-width: 65ch;
}
    

Eine begrenzte Zeilenlänge verbessert bei längeren Texten häufig die Lesbarkeit. Der Wert ist keine genaue Anzahl von Zeichen, bietet dafür aber eine nützliche Orientierung.

Flexible Breite mit min()

Die Funktion min() verwendet den kleinsten der angegebenen Werte. Damit kann ein Element den verfügbaren Platz nutzen und gleichzeitig eine maximale Breite erhalten.

.page-wrapper {
  width: min(100% - 2rem, 75rem);
  margin-inline: auto;
}
    

• Auf schmalen Bildschirmen verwendet der Bereich die verfügbare Breite abzüglich der seitlichen Abstände.
• Auf großen Bildschirmen wird die Breite auf 75rem begrenzt.
• margin-inline: auto zentriert den Bereich.

Mindestwerte mit max()

Die Funktion max() verwendet den größten der angegebenen Werte. Dadurch kann beispielsweise ein Mindestabstand festgelegt werden.

.page-wrapper {
  padding-inline: max(1rem, 4vw);
}
    

Der seitliche Innenabstand beträgt mindestens 1rem. Auf größeren Viewports kann er mit 4vw weiter anwachsen.

Flexible Werte mit clamp()

Die Funktion clamp() begrenzt einen bevorzugten flexiblen Wert durch einen Mindest- und einen Höchstwert.

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}
    

Die drei Angaben bedeuten:

Die Schriftgröße wächst damit fließend, wird aber weder kleiner als 2rem noch größer als 4rem.

Flexible Abstände

Nicht nur Schriftgrößen, sondern auch Abstände können sich innerhalb sinnvoller Grenzen an den verfügbaren Platz anpassen.

section {
  padding-block: clamp(2rem, 6vw, 6rem);
}

.card-grid {
  gap: clamp(1rem, 3vw, 2rem);
}
    

Kleine Viewports erhalten kompakte Abstände. Auf größeren Viewports können die Abstände fließend anwachsen, ohne unbegrenzt groß zu werden.

Flexible Layouts mit Flexbox und Grid

Relative Einheiten werden häufig mit Flexbox und Grid kombiniert. Beide Layoutsysteme können freien Platz automatisch verteilen.

Flexbox

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.flex-item {
  flex: 1 1 16rem;
}
    

Die Elemente dürfen wachsen und schrumpfen. Wenn der Platz nicht ausreicht, werden sie durch flex-wrap: wrap in die nächste Zeile umgebrochen.

Grid

.grid-container {
  display: grid;
  grid-template-columns:
    repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
}
    

Grid erzeugt automatisch so viele Spalten, wie in den verfügbaren Platz passen. Auf sehr schmalen Containern verhindert min(100%, 16rem), dass eine Spalte breiter als ihr Container wird.

Feste Werte sinnvoll verwenden

Responsive Webdesign bedeutet nicht, dass Pixelwerte vollständig vermieden werden müssen. Feste Werte sind sinnvoll, wenn eine Größe tatsächlich konstant bleiben soll.

• Rahmenbreiten wie 1px
• kleine Schattenversätze
• bestimmte Icon-Größen
• Mindestgrößen für Bedienelemente
• gezielte Breakpoints, die sich aus dem Layout ergeben

.button {
  min-height: 44px;
  padding: 0.75rem 1rem;
}
    

Im Beispiel bleibt die Mindesthöhe eindeutig festgelegt, während sich der Innenabstand an der Schriftgröße orientiert.

Zusammenfassung

• rem eignet sich besonders für gut skalierbare Schriftgrößen und Abstände.
• em ist nützlich, wenn Größen proportional zur Schrift eines Elements wachsen sollen.
• Prozentwerte passen Größen an den verfügbaren Bereich an.
• ch eignet sich zur Begrenzung gut lesbarer Textzeilen.
• min(), max() und clamp() verbinden flexible Größen mit sinnvollen Grenzen.
• Flexbox und Grid ermöglichen anpassungsfähige Layouts teilweise ganz ohne Media Queries.
• Feste Pixelwerte bleiben für bestimmte, bewusst konstante Größen sinnvoll.