CSS-Kurs / Farben und Einheiten: px, em, rem und Prozentwerte

CSS-Farben können mit Namen, hexadezimalen Werten und Funktionen wie rgb() geschrieben werden. Längeneinheiten verwenden unterschiedliche Bezugspunkte: px ist eine absolute CSS-Länge, em hängt von der Schriftgröße ab, rem verwendet die Schriftgröße der Wurzel und Prozentsätze hängen von der zu setzenden Eigenschaft ab.

Vergleichen Sie Farbnamen, hexadezimale Notation und RGB

teal, #008080 und rgb(0, 128, 128) drücken die gleiche Farbe aus. Farbnamen sind leicht zu lesen, aber es gibt auch festgelegte Namen, die verwendet werden können, und Hexadezimal- und RGB-Werte eignen sich gut, um die Menge an Rot, Grün und Blau numerisch zu steuern. RGB steht für Red, Green, Blue, also Rot, Grün und Blau.

Alpha beschreibt die Farbdeckkraft: 20% lässt einen Großteil der darunterliegenden Farbe durchscheinen, während 100% undurchsichtig ist. Das angezeigte Ergebnis hängt von dieser darunterliegenden Farbe ab. Alpha nur zum Hintergrund hinzuzufügen unterscheidet sich davon, opacity auf das gesamte Element anzuwenden, was auch den Text und die Nachkommen transparent macht. Siehe MDN: color.

Verstehen Sie die Bezugswerte von px, em und rem

px ist ein CSS-Pixel. Dies entspricht nicht immer einem physischen Pixel auf dem Bildschirm und kann je nach Bildschirmskalierung und Pixeldichte des Geräts unterschiedlich erscheinen. Die Verwendung von 16px bedeutet nicht, dass die Bildschirmvergrößerungsfunktion nicht funktioniert.

In font-size verwendet em die vererbte Schriftgröße. Bei einer Deklaration wie padding: 1em wird die eigene Schriftgröße des Elements verwendet. rem verwendet die Schriftgröße des Wurzelelements. Die folgenden Berechnungen gehen davon aus, dass sowohl die Schriftgröße des Wurzelelements als auch der des übergeordneten Elements 16px beträgt. Weitere Details finden Sie unter CSS-Schriften, Schriftgrößen und Zeilenhöhe.

Wenn Sie font-size: 1.25em bei jedem Schritt wiederholen, in dem die übergeordnete Größe zunimmt, erhöht sich diese von 16 → 20 → 25px. Wiederholen Sie 1.25rem über derselben Struktur, beide Schritte sind 20px. em ist praktisch für kleine Komponenten, die proportional zu den umgebenden Buchstaben sein müssen, und rem ist praktisch, um eine konstante Referenz auf der gesamten Seite zu teilen. Wählen Sie, welchen Kriterien Sie folgen möchten, anstatt die absolute richtige Antwort. Zur Definition der Einheit beziehen Sie sich auf den CSS-Wert von MDN und den Einheitenguide .

Finden Sie die Referenz für die prozentuale Breite

width: 50% wird normalerweise basierend auf der Inhaltsbreite des umgebenden Blocks berechnet. Nicht alle Prozentangaben in CSS-Eigenschaften basieren auf demselben Ziel. Zum Beispiel basiert font-size: 125% auf der vom übergeordneten Element geerbten Schriftgröße, daher muss es vom %-Wert der Breite getrennt betrachtet werden.

.wrapper { width: 100%; max-width: 640px; padding: 1rem; }

.inner { width: 50%; font-size: 1.25rem; padding: 1em; }

Dieses Beispiel verwendet border-box, sodass das Padding innerhalb der angegebenen Breite passt. Bei einer Grundschriftgröße von 16px, genügend Platz und ohne Rahmen beträgt die äußere Box 640px in der Breite. Ihr Padding von 16px auf jeder Seite lässt 608px Inhaltsbreite. Die innere Box mit 50% Breite hat 304px; ihr Padding von 20px auf jeder Seite lässt 264px für den Inhalt. Für weitere Details siehe CSS Breite, Höhe, min/max-Grenzen und box-sizing.

Wenn der Bildschirm schmal ist, wird auch die Breite des äußeren Kastens reduziert. In diesem Fall ist die innere Breite nicht auf 304px festgelegt, sondern wird basierend auf der neuen Inhaltsbreite des äußeren Kastens neu berechnet. max-width im Beispiel ist eine sekundäre Einstellung, die verhindert, dass die Box breiter als 640px wird.

Führen Sie das vollständige Beispiel aus

Geben Sie den folgenden Code in units.html ein, gespeichert als UTF-8, und öffnen Sie ihn in Ihrem Browser. Der Code umfasst Farbvergleiche, verschachtelte Einheiten und Breitenberechnungen. Der Root-100% folgt der Standardschriftgröße des Browsers, sodass die 16px-Bedingung in der Übung unten zuerst in den Entwicklerwerkzeugen überprüft wird.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparing colors and units</title>
  <style>
    html { font-size: 100%; }
    * { box-sizing: border-box; }
    body { margin: 16px; font-family: sans-serif; line-height: 1.7; }
    .wrapper { width: 100%; max-width: 640px; padding: 1rem; background: #e9f7ef; }
    .inner { width: 50%; padding: 1em; font-size: 1.25rem; background: white; }
    .color-name { color: teal; }
    .color-hex { color: #008080; }
    .color-rgb { color: rgb(0, 128, 128); }
    .alpha { padding: 1rem; background: rgb(0 128 128 / 20%); }
    .nest { font-size: 16px; }
    .em-step { font-size: 1.25em; }
    .rem-step { font-size: 1.25rem; }
  </style>
</head>
<body>
  <h1>Colors and units</h1>
  <h2>Three notations of the same color</h2>
  <p class="color-name">Character specified by teal</p>
  <p class="color-hex">Characters specified as #008080</p>
  <p class="color-rgb">Character specified by rgb(0, 128, 128)</p>
  <p class="alpha">Only this box's background color has 20% opacity.</p>
  <h2>Width and spacing</h2>
  <div class="wrapper"><div class="inner">Text and padding in the inner box</div></div>
  <h2>Nested em</h2>
  <div class="nest"><div class="em-step">First step<div class="em-step">Second step</div></div></div>
  <h2>Nested rem</h2>
  <div class="nest"><div class="rem-step">First step<div class="rem-step">Second step</div></div></div>
</body>
</html>

Ändern Sie jeweils nur einen Wert

1. Überprüfen Sie die berechnete Schriftgröße des HTML im Entwicklertools. Wenn sie 16px beträgt, stellen Sie sicher, dass das verschachtelte em 20px·25px und das verschachtelte rem 20px·20px beträgt. Wenn es eine andere Grundgröße gibt, berechnen Sie sie in demselben Vielfachen.
2. Setzen Sie die Schriftgröße von html vorübergehend auf font-size: 20px. Alle rem-basierten Texte sind 25px, und .nest behält die angegebene 16px bei, daher beträgt die em-Ebene 20px·25px. Das Padding von .inner beträgt 25px. Stellen Sie nach dem Vergleich wieder font-size: 100% ein.
3. Machen Sie das Fenster breiter und überprüfen Sie die Boxgrößen von .wrapper und .inner. Bei der ursprünglichen 16px-Bedingung beträgt es 640px·304px. Wenn Sie das Fenster verengen, stellen Sie sicher, dass beide Seiten zusammen schrumpfen.
4. Überprüfen Sie die berechneten Farben der drei Farbabsätze. Sie müssen alle denselben RGB-Wert haben. Stellen Sie sicher, dass das Ändern des Hintergrunds von .alpha den Text selbst nicht verschwommen erscheinen lässt.

Wenn es nicht das ist, was Sie erwartet haben, überprüfen Sie die Berechnungskriterien, bevor Sie einfach die Einheiten ändern. Eltern- und Wurzel-Schriftgröße, Padding, Box-Sizing und überschreibende CSS-Regeln können einen Einfluss haben. Änderungen, die in den Entwicklertools vorgenommen werden, verschwinden in der Regel beim Aktualisieren, und Änderungen, die in Dateien gespeichert werden, müssen manuell auf die ursprünglichen Werte zurückgesetzt werden.