CSS-Längeneinheiten

Übersicht

Viele CSS-Eigenschaften akzeptieren Zahlen als Werte. Manchmal sind dies ganze Zahlen. Manchmal sind es Dezimalzahlen und Brüche. In anderen Fällen sind es Prozentsätze. Was auch immer es ist, die Einheit, die einer Zahl folgt, bestimmt die berechnete Länge der Zahl. Und mit „Länge“ meinen wir jede Art von Distanz, die als Zahl beschrieben werden kann, wie die physischen Abmessungen eines Elements, ein Zeitmaß, geometrische Winkel … alle möglichen Dinge!

Zum Zeitpunkt der Erstellung dieses Artikels definiert die CSS Values and Units Module Level 4 Spezifikation eine Reihe verschiedener CSS-Einheiten – und viele davon sind relativ neu (dieses Wortspiel wird später Sinn ergeben).

Einführung

Sie werden in CSS viele Zahlen sehen. Hier sind ein paar Beispiele:

/* Integers */
1

/* Pixels */
14px

/* em */
1.5em

/* rem */
3rem

/* Percentage */
50%

/* Characters */
650ch

/* Viewport units */
100vw
80vh
50dvh

/* Container units */
100cqi
50cqb

Obwohl diese alle unterschiedliche Bedeutungen haben, bewirken sie im Wesentlichen dasselbe: sie definieren die Abmessungen eines Elements in CSS. Wir benötigen Einheiten in CSS, weil sie bestimmen, wie Elemente auf einer Seite dimensioniert werden, sei es die height einer Box, die width eines Bildes, die font-size einer Überschrift, der margin zwischen zwei Elementen, wie lange eine Animation läuft usw. Ohne sie hätte der Browser keine Möglichkeit zu wissen, wie er Zahlen auf ein Element anwenden soll.

Also, was zum Geier ist px? Was hat es mit diesem Ding namens rem auf sich? Wie unterscheiden sich diese von anderen Längeneinheiten? Die Einheit definiert, mit welcher Art von Zahl wir es zu tun haben, und jede bewirkt etwas anderes, was uns viele Möglichkeiten gibt, Dinge in CSS zu dimensionieren.

Arten von Zahlen

Man könnte meinen, eine Zahl sei einfach nur eine Zahl, und damit liegt man nicht falsch. Zahlen sind Zahlen! Aber wir können zwischen einigen verschiedenen Arten von Zahlen unterscheiden. Das ist ein hilfreicher Kontext für die Diskussion der verschiedenen Arten von Einheiten, an die wir sie anhängen, da „Zahl“ nun mal eine Vielzahl verschiedener Dinge bedeuten kann.

• Integer (buchstäblich eine einheitenlose Zahl, z. B. 3)
• Zahlen (wie ein Integer, nur in Dezimalstellen gemessen, z. B. 3.2)
• Dimensionen (entweder eine Zahl oder ein Integer mit einer Einheit, z. B. 3.2rem)
• Verhältnisse (der Quotient zwischen zwei geteilten Zahlen, z. B. 3/2)
• Prozentsätze (z. B. 3%)

Verstanden? Es sind alles Zahlen, aber mit Nuancen, die sie jeweils ein klein wenig anders machen.

Von hier aus können wir uns Zahlen in CSS so vorstellen, dass sie in zwei spezifische Arten von Einheiten fallen: absolut und relativ. Beginnen wir unseren tiefen Einblick in CSS-Längeneinheiten damit, diese aufzuschlüsseln.

Absolute Einheiten

Eine absolute Einheit ist wie Bill Murray im Film Und täglich grüßt das Murmeltier: Sie ist immer gleich. Mit anderen Worten: Was auch immer die Zahl ist, genau so wird sie im Browser berechnet, unabhängig davon, wie andere Elemente dimensioniert sind.

Der am häufigsten vorkommende absolute Wert ist der Pixel-Wert. Es ist etwas schwer zu definieren, aber ein Pixel ist der kleinste Baustein einer grafischen Anzeige, wie eines Computerbildschirms. Er basiert auf der Auflösung des Bildschirms. Wenn Sie also einen extrem hochauflösenden Bildschirm haben, ist ein Pixel kleiner als auf einem niedrig auflösenden Bildschirm, da die Auflösung mehr Pixel auf kleinerem Raum unterbringen kann, um eine höhere Klarheit zu erzielen. Schauen Sie sich jedoch das folgende Beispiel an. Alle Boxen sind mit Pixeln dimensioniert, sodass Sie ein Gefühl dafür bekommen, wie groß 50px im Vergleich zu 250px ist.

Absolute Werte sind schön, weil sie vorhersehbar sind. Das könnte sich jedoch in einigen Situationen ändern, insbesondere beim Zoomen. Wenn beispielsweise ein Benutzer über die Browsereinstellungen in eine Seite hineinzoomt, erhöht sich alles, was mit einem absoluten Wert definiert wurde, entsprechend seiner absoluten Größe. Wenn also die font-size eines Absatzes auf 20px eingestellt ist, wird der Absatz größer, wenn der Benutzer näher in die Seite zoomt. Und da Zoom oft verwendet wird, um Inhalte lesbarer zu machen, könnte die Verwendung absoluter Werte, die ihre Skalierung beibehalten, ein guter Ansatz sein, um Seiten barrierefreier zu machen, indem Benutzer Dinge so weit heranzoomen können, dass sie angenehm zu lesen sind.

Aber andererseits: Lesen Sie Josh Collinsworths zwar reißerischen, aber fantastischen Post mit dem Titel „Why you should never use px to set font-size in CSS“ für eine ausführliche Erklärung, wie sich Pixel verhalten, wenn sie zur Einstellung der font-size eines Elements verwendet werden. Es ist eine großartige Lektüre, um das Verhalten und die Einschränkungen von Pixeleinheiten besser zu verstehen.

Und übrigens: Pixel sind nur eine von vielen Arten von absoluten Längen, die in CSS verfügbar sind. Tatsächlich können wir sie nach der Art der Dinge gruppieren, die sie messen.

img {
  max-width: 500px;
}

/* Double the resolution and above */
@media (min-resolution >= 2dppx) {
  img {
    max-width: 100%;
  }
}

Relative Einheiten

Eine relative Einheit ist extrem passend benannt, da jeder Wert, den wir für eine relative Einheit verwenden, von der Größe von etwas anderem abhängt. Angenommen, wir haben ein HTML-Element, ein <div>, und wir geben ihm einen absoluten Höhenwert (keinen relativen) von 200px.

<div class="box">
  I am 200 pixels tall
</div>

.box {
  height: 200px;
}

Diese Höhe wird sich nie ändern. Das .box-Element wird egal was passiert 200px hoch sein. Aber nehmen wir an, wir geben dem Element eine relative Breite (keine absolute) von 50%.

<div class="box">
  I am 200 pixels tall and 50% wide
</div>

.box {
  height: 200px;
  width: 50%;
}

Was passiert mit unserer Box? Sie nimmt 50%, also die Hälfte, des verfügbaren Platzes auf dem Bildschirm ein.

Sehen Sie das? Öffnen Sie diese Demo in einem neuen Fenster und ändern Sie die Breite des Bildschirms. Beachten Sie auch, dass sich die Höhe nie ändert, da sie eine absolute Längeneinheit in Pixeln ist. Die Breite hingegen wird fließend angepasst, da sich „50% des verfügbaren Platzes“ mit der Breite des Bildschirms ändert.

Das meinen wir, wenn wir über berechnete Werte (computed values) bei relativen Zahlen sprechen. Eine relative Zahl fungiert quasi wie ein Multiplikator, der den für eine Länge verwendeten Wert basierend darauf berechnet, zu welcher Art von Einheit sie relativ ist. Ein Wert von 3rem wird also am Ende zu einem anderen Wert, wenn er berechnet wird.

Prozentsätze, wie 50%, sind nur eine Art von relativen Einheiten. Wir haben viele, viele andere. Auch hier ist es hilfreich, die Dinge in separate Gruppen aufzuteilen, um die Unterschiede zu verstehen, genau wie wir es zuvor bei den absoluten Einheiten getan haben.

Schriftrelative Einheiten

Die Einheiten em und rem, die wir uns zuvor angesehen haben, sind Paradebeispiele für relative Einheiten, die man überall sieht. Sie sind, wie wir gesehen haben, unglaublich praktisch, da das Ändern des font-size-Werts des Elternelements eines Elements bzw. des <html>-Elements dazu führt, dass der eigene font-size-Wert des Elements entsprechend dem aktualisierten Wert aktualisiert wird.

Mit anderen Worten: Wir müssen die font-size eines Elements nicht direkt ändern, wenn wir die font-size anderer Elemente aktualisieren – sie ist relativ und skaliert mit der Änderung.

Einheit	Name	Relativ zu …
em	Element	Der font-size-Wert des übergeordneten Containers des Elements.
rem	Root-Element	Der font-size-Wert des <html>-Elements.
ch	Zeichen (Character)	Die Breite des Zeichens 0 relativ zur Schriftart des Elternelements. Die berechnete Breite kann sich beim Ersetzen einer Schriftart durch eine andere aktualisieren, außer bei Monospace-Schriften, die eine konsistente Größe haben.
rch	Root-Zeichen	Dasselbe wie eine ch-Einheit, außer dass sie relativ zur Schriftart des Root-Elements, also <html>, ist.
lh	Zeilenhöhe	Der line-height-Wert des übergeordneten Containers des Elements.
rlh	Root-Element Zeilenhöhe	Der line-height-Wert des <html>-Elements.
cap	Großbuchstabe (Capital letter)	Die Höhe eines Großbuchstabens für eine bestimmte Schriftart relativ zum Elternelement.
rcap	Root-Großbuchstabe	Dasselbe Maß wie cap, aber relativ zum Root-Element, also <html>.
ic	Internationales Zeichen	Die Breite eines CJK-Zeichens oder eines fremden Glyphens, z. B. aus einer chinesischen Schriftart, relativ zum übergeordneten Container eines Elements.
ric	Root internationales Zeichen	Dasselbe Maß wie ic, aber relativ zum Root-Element, also <html>.
ex	X-Höhe	Die Höhe des Buchstabens x einer bestimmten Schriftart oder ein Äquivalent für Schriftarten, die kein x-Zeichen enthalten, relativ zum Elternelement.
rex	Root x-Höhe	Dasselbe Maß wie ex, aber relativ zum Root-Element, also <html>.

Einige dieser Begriffe werden Typografie-Nerds mehr sagen als anderen. Das folgende Diagramm hebt die Linien hervor, die den relativen Schrifteinheiten entsprechen.

Um das Konzept noch einmal zu verdeutlichen: Wenn width: 10ch bei Verwendung einer Schriftart zu einer bestimmten Anzahl von Pixeln berechnet wird, ist es wahrscheinlich, dass sich der berechnete Wert ändert, wenn die Schriftart gegen eine andere mit entweder größeren oder kleineren Zeichen ausgetauscht wird.

Viewport-relative Einheiten

Einheit	Name	Relativ zu …
vh / vw	Viewport-Höhe / Viewport-Breite	Die Höhe bzw. Breite des Viewports (d. h. des sichtbaren Teils des Bildschirms).
vmin / vmax	Viewport Minimum / Viewport Maximum	Der jeweils kleinere bzw. größere Wert von vh und vw.
lvh / lvw	Große Viewport-Höhe / Große Viewport-Breite (Large)	Die Höhe und Breite des Viewports, wenn die virtuelle Tastatur des Geräts oder die Browser-UI ausgeblendet ist, wodurch mehr Platz zur Verfügung steht.
lvb / lvi	Großer Viewport Block / Großer Viewport Inline	Dies sind die logischen Äquivalente von lvh und lvw, die die Block- und Inline-Richtungen angeben.
svh / svw	Kleine Viewport-Höhe / Kleine Viewport-Breite (Small)	Die Höhe und Breite des Viewports, wenn die virtuelle Tastatur des Geräts oder die Browser-UI eingeblendet ist, wodurch der verfügbare Platz kleiner wird.
svb / svi	Kleiner Viewport Block / Kleiner Viewport Inline	Dies sind die logischen Äquivalente von svh und svw, die die Block- und Inline-Richtungen angeben.
dvh / dvw	Dynamische Viewport-Höhe / Dynamische Viewport-Breite	Die Höhe und Breite des Viewports unter Berücksichtigung des sich ändernden verfügbaren Platzes, wenn beispielsweise die virtuelle Tastatur oder die Browser-UI ein- oder ausgeblendet wird.
dvb / dvi	Dynamischer Viewport Block / Dynamischer Viewport Inline	Dies sind die logischen Äquivalente von dvh und dvw, die die Block- und Inline-Richtungen angeben.
dvmin / dvmax	Dynamisches Viewport Minimum / Dynamisches Viewport Maximum	Der jeweils kleinere bzw. größere Wert von dvh/dvb und dvw/dvi.

Ah, Viewport-Einheiten! Wenn wir sagen, dass etwas 100% breit sein soll, bedeutet das, dass es die volle Breite des Containers einnimmt, in dem es sich befindet. Das liegt daran, dass eine Prozentsatzeinheit immer relativ zu ihrem nächsten Elternelement ist. Aber eine  Viewport-Einheit ist immer relativ zur Größe des Viewports oder Browserfensters. Wenn ein Element eine Viewport-Höhe von 100vh und eine Viewport-Breite von 100vw hat, dann wird es so hoch und breit wie das gesamte Browserfenster sein.

Dies kann eine elegante Art sein, so etwas wie ein Hero-Banner oben auf Ihrer Website zu erstellen. Beispielsweise können wir ein Banner erstellen, das immer die Hälfte (50vh) der Viewport-Höhe einnimmt, wodurch es prominent erscheint, egal wie hoch das Browserfenster des Benutzers ist. Ändern Sie das CSS in der oberen linken Ecke der folgenden Demo von height: 50vh in etwas anderes wie 75vh, um zu sehen, wie die Höhe des Banners reagiert.

Es gibt noch etwas sehr Wichtiges, das man bei der Arbeit mit Viewport-Einheiten wissen muss. Sie wissen, dass Mobiltelefone, wie das iPhone oder ein Android-Gerät, virtuelle Tastaturen haben, auf denen man direkt auf dem Bildschirm tippt? Diese Tastatur ändert die Größe des Viewports. Das bedeutet, dass immer dann, wenn die Tastatur öffnet, 100vh nicht mehr die volle Höhe des Bildschirms ist, sondern nur noch der Platz, der übrig bleibt, während die Tastatur offen ist, und das Layout könnte dadurch stark zusammengedrückt werden.

Aus diesem Grund haben wir zusätzlich zu vh die Einheiten svh, lvh und dvh:

• svh entspricht der „kleinen“ (small) Viewport-Höhe, die auftritt, wenn die Tastatur geöffnet ist.
• lvh entspricht der „großen“ (large) Viewport-Höhe, also wenn die Tastatur deaktiviert und nicht sichtbar ist.
• dvh ist ein guter Mittelweg zwischen svh und lvh, da sie „dynamisch“ ist und ihren Wert entsprechend aktualisiert, wenn die Tastatur angezeigt wird oder nicht.
• dvmin / dvmax ist der jeweils größere bzw. kleinere Wert von dvh.

Es ist in manchen Fällen eine Gratwanderung und ein guter Grund, warum Container-Queries und ihre Einheiten (zu denen wir als Nächstes kommen) immer beliebter werden. Schauen Sie sich Ahmed Shaders Artikel „New Viewport Units“ für eine umfassende Erklärung der Viewport-Einheiten mit detaillierten Beispielen für mögliche Probleme an. Vielleicht interessiert Sie auch Sime Vidas' Artikel „New CSS Viewport Units Do Not Solve The Classic Scrollbar Problem“ für ein besseres Verständnis davon, wie Viewport-Einheiten Werte berechnen.

.parent-container {
  container-type: inline-size;
}

.child-element {
  background: rebeccapurple;
  width: 100%;

  @container parent (width > 30ch) {
    .child-element {
      background: dodgeblue;
      width: 50cqi;
    }
  }
}

Was ist mit einheitenlosen Zahlen?

Oh ja, es gibt Zeiten, in denen Sie Zahlen in CSS sehen werden, die überhaupt keine Einheit haben – nur eine einzelne Ganzzahl oder Zahl ohne irgendwelche Zusätze.

aspect-ratio: 2 / 1; /* Ratio */
column-count: 3; /* Specifies a number of columns */
flex-grow: 1; /* Allows the element to stretch in a flex layout */
grid-column-start: 4; /* Places the element on a specific grid line */
order: 2; /* Sets the order of elemnents in a flex or grid layout */
scale: 2; /* The elementis scaled up or down by a factor */
z-index: 100; /* Element is placed in a numbered layer for stacking */
zoom: 0.2;  /* The element zooms in or out by a factor */

Dies ist keine vollständige Liste aller CSS-Eigenschaften, die einheitenlose numerische Werte akzeptieren, aber es ist ein solides Bild davon, wann man sie verwendet. Sie werden sehen, dass eine einheitenlose Zahl in den meisten Fällen ein explizites Detail ist, wie z. B. eine bestimmte Spalte zur Positionierung eines Elements, eine bestimmte Ebene in einem Stapelkontext (Stacking Context), ein Boolescher Wert, der eine Funktion aktiviert oder deaktiviert, oder die Reihenfolge von Elementen. Beachten Sie jedoch, dass wir "Null" als Zahl jederzeit mit oder ohne vorangestellte Einheit schreiben können, da Null immer als Null ausgewertet wird, egal mit welcher Einheit wir es zu tun haben.

border: 0; /* No border */
box-shadow: 0 0 5px #333; /* No shadow offset */
margin: 0; /* No margin */
padding: 0; /* No padding */

Wir können unsere eigenen benutzerdefinierten Einheiten erstellen!

In einigen Fällen möchten wir vielleicht mit einem numerischen Wert arbeiten, aber CSS erkennt ihn nicht exakt als solchen an. In diesen Fällen wird die Zahl stattdessen als "String"-Wert (Zeichenfolge) erkannt, unabhängig davon, ob sie alphabetische Zeichen enthält oder nicht. Hier können wir @property verwenden, um eine sogenannte „Custom Property“ zu erstellen, die einen numerischen Wert auf eine bestimmte Weise auswertet.

Hier ist ein gutes Beispiel. Es gab eine Zeit, in der es praktisch unmöglich war, einen Farbverlauf zu animieren, der im Laufe der Zeit die Farbe ändert, da dies Folgendes erfordern würde: (1) eine Farbfunktion, die es uns ermöglicht, den Farbton eines Farbwerts zu ändern (was wir mit hsl() haben) und (2) die Fähigkeit, diesen Farbtonwert über das Farbspektrum in einem Bereich von 0deg bis 360deg zu interpolieren.

Klingt einfach genug, oder? Definieren Sie eine Variable, die bei 0 beginnt und am Ende einer Animation 360 Grad durchläuft. Aber das funktioniert nicht.

/* 👎 */
.element {
  --hue: 0;
  
  animation: rainbow 10s linear infinite;
  background: linear-gradient(hsl(--hue 50% 50%);
}

@keyframes rainbow {
  from { --hue: 0; }
  to { --hue: 360deg; }
}

Das liegt daran, dass CSS die Variable als String statt als Zahl liest. Wir müssen diese Variable als Custom Property registrieren, damit CSS sie treffend als numerischen Wert liest.

@property --hue {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}

Da haben wir's! Jetzt, wo wir CSS einen Hinweis gegeben haben, dass die --hue-Syntax die einer <number> ist, können wir munter animieren!

/* 👍 */
@property --hue {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}

.element {
  --hue: 0;
  
  animation: rainbow 10s linear infinite;
  background: linear-gradient(hsl(--hue 50% 50%);
}

@keyframes rainbow {
  from { --huw: 0; }
  to { --hue: 360deg; }
}

Eine tiefergehende Erklärung desselben Beispiels finden Sie in „Interpolating Numeric CSS Variables“ von Geoff Graham.

Wann man welche Einheit verwendet

Das ist extrem knifflig, weil CSS sehr flexibel ist und es keine definitiven oder unumstößlichen Regeln dafür gibt, wann man einen bestimmten Typ von CSS-Längeneinheit gegenüber einem anderen verwendet. In manchen Fällen müssen Sie zwingend eine bestimmte Einheit verwenden, weil ein CSS-Feature so spezifiziert ist – etwa die Verwendung von Winkeleinheiten, um die Richtung eines linearen Gradienten festzulegen.

.element {
  background: linear-gradient(
    135deg, red, blue;
  )
}

Dasselbe gilt für die Werte, die wir in bestimmten Farbfunktionen verwenden, wie etwa die Verwendung von Prozentangaben, um Sättigung und Helligkeit in der hsl()-Funktion festzulegen.

.element {
  background: hsl(0 100% 10%);
}

Wo wir gerade von Farbfunktionen sprechen: Wir definieren die Alpha-Transparenz entweder mit einer Ganzzahl oder einer Dezimalzahl.

.element {
  background: hsl(0 100% 10% / 0.5); /* or simply .5 */
}

Abgesehen davon wird es in vielen Fällen darauf hinauslaufen, dass "es darauf ankommt", aber es gibt einige Instanzen, in denen es sinnvoll ist, eine bestimmte Einheit in Ihrer Arbeit zu verwenden.

Schriftgrößen generell in rem- und em-Einheiten festlegen

Auf diese Weise können Sie alles so einrichten, dass das Ändern des font-size-Werts des <html>- oder eines Elternelements auch die Schriftgrößen ihrer Nachkommen aktualisiert.

html {
  font-size: 18px; /* Inherited by all other elements */
}

.parent {
  font-size: 1rem; /* Updates when the `html` size changes */
}

.child {
  font-size: 1em; /* Updates when the parent size changes */
}

"Null" ohne Einheiten deklarieren, wenn gewünscht

Es ist keine große Sache, aber das Weglassen der Einheiten verkürzt den Code ein kleines bisschen, und wann immer wir kürzeren Code schreiben können, ist das eine Chance für eine schnellere Seitenperformance. Die Auswirkung mag vernachlässigbar sein, aber wir können es tun, da 0 immer als 0 berechnet wird, unabhängig davon, mit welcher Einheit wir arbeiten.

Container-Einheiten für responsives Design verwenden, wo immer möglich

Container Queries im Allgemeinen sind einfach großartig für responsive Layouts, weil sie auf die Größe des Containers schauen und uns erlauben, Stile auf seine Nachkommen anzuwenden, wenn der Container eine bestimmte Größe hat.

.parent {
  container: my-container / inline-size; /* Looks at width */
}

.child {
  display: flex;
  flex-direction: column;
  max-width: 100vh; /* 100% of the viewport */
}

/* When the container is greater than 600px wide */
@container my-container (width >= 600px) {
  .child {
    flex-direction: row;
    max-width: 50%; /* 50% of the parent elenent */
  }
}

Wenn wir also das .child-Element – oder eines seiner Kinder – in der Größe festlegen, lohnt es sich eher, die Größen im Verhältnis zur Containergröße mit Container-Einheiten anzugeben, als zum Beispiel zur Viewport-Größe mit Viewport-Einheiten.

.parent {
  container: my-container / inline-size; /* Looks at width */
}

.child {
  display: flex;
  flex-direction: column;
  max-width: 100cqi; /* 100% of the container */
}

/* When the container is greater than 600px wide */
@container my-container (width >= 600px) {
  .child {
    flex-direction: row;
    max-width: 50cqi; /* 50% of the container */
  }
}

Prozentangaben verwenden, wenn der Kontext unsicher ist

Ja, verwenden Sie Container-Einheiten für responsives Design, aber das nützt Ihnen nur etwas, wenn Sie wissen, dass Sie sich im Kontext eines Containers befinden. Es ist jedoch möglich, dass Sie dieselbe Komponente an verschiedenen Stellen verwenden, und eine dieser Stellen ist möglicherweise kein registrierter Container.

In diesem Fall sollten Sie einen Prozentwert wählen, da Prozentangaben relativ zu dem jeweiligen Elternelement sind, in dem Sie sich befinden, unabhängig davon, ob es ein Container ist oder nicht. Auf diese Weise können Sie die Größe eines Elements als 100% deklarieren, damit es den gesamten Platz des jeweiligen Elternelements einnimmt.

Der einzige Warnhinweis ist, dass wir die Größe hier nur auf das direkte Elternelement beziehen. Im Gegensatz dazu können Container-Einheiten jeden Nachkommen im Container stylen, egal wo er sich befindet.

Viewport-Einheiten sind ideal für das Layout von Containern

Sie denken vielleicht, dass Viewport-Einheiten eine schlechte Sache sind, da wir in so vielen Fällen davon abgeraten haben (wie bei der Schriftgröße), aber sie sind immer noch unglaublich nützlich, insbesondere wenn es darum geht, ein ganzseitiges Layout zu erstellen.

Ich sage „ganzseitiges“ Layout, weil Container Queries der Goldstandard für die Größenanpassung von Elementen entsprechend dem Platz in ihrem Container sind. Wenn wir jedoch mit einer ganzen Seite voller Container arbeiten, können hier Viewport-Einheiten verwendet werden, um ein responsives Layout auf einer höheren Ebene zu etablieren.

Wenn die Elemente einzelner Container auf ihren Container schauen, um Größeninformationen zu erhalten, dann sollten sich die Größe und Platzierung der einzelnen Container selbst wahrscheinlich am Viewport orientieren, da dieser den verfügbaren Platz auf der Seite direkt beeinflusst.

Beispiele

20px * 1.5 = 30px

/* This is the browser's default font size */
html {
  font-size: 16px;
}

.box {
  font-size: 1.5rem; /* 16px * 1.5 = 24px */
}

html {
  font-size: 18px;
}

.box {
  font-size: 1.5rem; /* 18px * 1.5 = 27px */
}

<p>The big brown dog lazily jumped over the fence.</p>

p {
  width: 10ch;
}

.parent {
  line-height: 1.5;
}

.child {
  height: 3lh; /* 3 * 1.5 = 4.5 */
}

Verwandte Artikel

Absolute vs. Relative Einheiten

Artikel vom 18. Jan. 2020

Die Längen von CSS

Containereinheiten Einheiten

Chris Coyier

Artikel vom 9. Sep. 2016

Anpassbare Komponenten mit relativen CSS-Einheiten erstellen

Containereinheiten Einheiten

Ahmad Shadeed

Artikel vom 5. Aug. 2020

Berechnete Werte: Mehr als man auf den ersten Blick sieht

Containereinheiten Einheiten

Jemimah Omodior

Artikel vom 18. Dez. 2020

Alles ist relativ.

Containereinheiten Einheiten

Geoff Graham

Container-Einheiten

Artikel vom 13. Dez. 2022

Ein paar Male, in denen mir Container Size Queries geholfen hätten

Containereinheiten Einheiten

Dan Christofi

Artikel vom 14. Jan. 2022

Container-Einheiten sollten ziemlich praktisch sein

Containereinheiten Einheiten

Chris Coyier

Artikel am 11. Jun. 2021

Ein Füllhorn an Container Queries

Containereinheiten Einheiten

Geoff Graham

Artikel vom 29. Apr. 2012

Bedingter Inhalt über CSS Media Queries

Containereinheiten Einheiten

Chris Coyier

Viewport-Einheiten

Artikel vom 21. Dez. 2017

„The Notch“ und CSS

Containereinheiten Einheiten

Chris Coyier

Artikel vom 25. März 2020

CSS Viewport-Einheiten

Containereinheiten Einheiten

Chris Coyier

Artikel vom 18. Mai 2020

CSS-Fix für 100vh in mobilem WebKit

Containereinheiten Einheiten

Chris Coyier

Artikel vom 23. Mai 2022

Spaß mit Viewport-Einheiten

Containereinheiten Einheiten

Miriam Suzanne

Artikel vom 9. Aug. 2021

Große, kleine und dynamische Viewports

Containereinheiten Einheiten

Chris Coyier

Artikel vom 5. Juni 2015

Viewport- vs. Prozent-Einheiten

Containereinheiten Einheiten

Chris Coyier

Artikel vom 15. Nov. 2022

Typografie in Viewport-Größe

Containereinheiten Einheiten

Chris Coyier

Artikel vom 6. Nov. 2019

Einige Dinge, die man bei der Arbeit mit Viewport-Einheiten wissen sollte

Containereinheiten Einheiten

Chris Coyier

Artikel vom 24. Juni 2015

Typografie in Viewport-Größe mit Mindest- und Maximalgrößen

Containereinheiten Einheiten

Chris Coyier

Artikel vom 5. Jan. 2018

`font-size` mit allen Viewport-Einheiten

Containereinheiten Einheiten

Chris Coyier

Artikel vom 28. Juni 2021

Umgehung des Viewport-basierten Fluid-Typography-Bugs in Safari

Containereinheiten Einheiten

Chris Coyier

Typografie

Artikel vom 23. Apr. 2020

Barrierefreie Schriftgrößen erklärt

Containereinheiten Einheiten

Andrés Galante

Artikel vom 19. Mai 2020

Vereinfachte fluide Typografie

Containereinheiten Einheiten

Chris Coyier

Artikel am 13. Apr. 2017

Die CSS-Einheit rem kann mehr als nur Schriftgrößen

Containereinheiten Einheiten

Roman Rudenko

Artikel am 17. Dez. 2015

Schriftgrößen-Konzept: px für Root, rem für Komponenten, em für Textelemente

Containereinheiten Einheiten

Chris Coyier

Artikel am 5. Mai 2020

`lh` und `rlh` Einheiten

Containereinheiten Einheiten

Chris Coyier

Artikel vom 15. Nov. 2022

Typografie in Viewport-Größe

Containereinheiten Einheiten

Chris Coyier

Artikel vom 5. Jan. 2018

`font-size` mit allen Viewport-Einheiten

Containereinheiten Einheiten

Chris Coyier

Artikel vom 24. Juni 2015

Typografie in Viewport-Größe mit Mindest- und Maximalgrößen

Containereinheiten Einheiten

Chris Coyier

Winkeleinheiten

Artikel am 6. Feb. 2019

Gradians und Turns: Die stillen Helden der CSS-Winkel

Containereinheiten Einheiten

Geoff Graham

Artikel am 9. Apr. 2019

Transformationen auf SVG-Elementen

Containereinheiten Einheiten

Ana Tudor

Artikel am 2. Mär. 2021

So animieren Sie das Details-Element

Containereinheiten Einheiten

Chris Coyier

Artikel am 8. Sep. 2020

Menü-Einblendung durch Seiten-Rotations-Animation

Containereinheiten Einheiten

Preethi

Artikel am 1. Jun. 2020

Rotierte Tabellen-Spaltenköpfe... jetzt mit weniger "Magic Numbers"!

Containereinheiten Einheiten

Cappie Pomeroy

Artikel am 30. Okt. 2010

Moleküle rotieren mit 3D-Transformationen

Containereinheiten Einheiten

Chris Coyier

Artikel am 17. Mai 2017

CSS-Würfel vereinfachen mit Custom Properties

Containereinheiten Einheiten

Ana Tudor

Zeiteinheiten

Artikel am 7. Jan. 2017

CSS-Animations-Tricks: State Jumping, negative Verzögerungen, Ursprung animieren und mehr

Containereinheiten Einheiten

Zach Saucier

Artikel am 9. Jan. 2018

CSS-Animationen natürlicher wirken lassen

Containereinheiten Einheiten

Brandon Gregory

Artikel am 9. Dez. 2010

CSS Transition Timing

Containereinheiten Einheiten

Chris Coyier

Artikel am 14. Aug. 2019

Gestaffelte CSS-Übergänge

Containereinheiten Einheiten

Chris Coyier

Artikel am 6. Sep. 2022

Manipulieren von CSS-Animationsstatus und Wiedergabezeit

Containereinheiten Einheiten

Lu Wang

Artikel am 3. Aug. 2015

Debugging von CSS Keyframe-Animationen

Containereinheiten Einheiten

Sarah Drasner

Artikel am 19. Sep. 2022

Erstellung einer Echtzeituhr mit einem Conic-Gradient-Zifferblatt

Containereinheiten Einheiten

Brecht De Ruyte

Auflösungseinheiten

Artikel am 24. Okt. 2014

High-DPI-Monitore, Auflösungsunabhängigkeit, das Web und Sie

Containereinheiten Einheiten

Chris Coyier

Artikel am 10. Apr. 2017

Optimierung für großformatige Displays

Containereinheiten Einheiten

Jon Yablonski

Snippet am 14. Feb. 2013

Media Query für Retina-Displays

Containereinheiten Einheiten

Chris Coyier

Artikel am 30. Jun. 2021

Behebung eines Fehlers im Modus mit niedriger Auflösung

Containereinheiten Einheiten

Chris Coyier