| Einheit | Vergleichen Sie alle CSS-Einheiten, einschließlich px, em, rem, vw, vh, fr und mehr. Enthält Beispiele, Browser-Unterstützung und Verwendungszweck für jede Einheit. | |
|---|---|---|
pxAbsolute | Pixels — 1/96th of 1 inch on screen | |
ptAbsolute | Points — 1/72nd of 1 inch (print) | |
pcAbsolute | Picas — 12 points = 1 pica | |
cmAbsolute | Centimeters | |
mmAbsolute | Millimeters | |
inAbsolute | Inches (1in = 96px) | |
QAbsolute | Quarter-millimeters (1Q = 0.25mm) |
| Einheit | Vergleichen Sie alle CSS-Einheiten, einschließlich px, em, rem, vw, vh, fr und mehr. Enthält Beispiele, Browser-Unterstützung und Verwendungszweck für jede Einheit. | |
|---|---|---|
emRelative (font) | Relative to parent element's font-size | |
remRelative (font) | Relative to root (:root) font-size | |
chRelative (font) | Width of the '0' character in current font | |
exRelative (font) | Height of lowercase 'x' in current font | |
capRelative (font) | Cap height of current font | |
icRelative (font) | Advance measure of '水' (CJK ideograph) | |
lhRelative (font) | Line height of the element | |
%Relative (parent) | Percentage of parent element's value |
| Einheit | Vergleichen Sie alle CSS-Einheiten, einschließlich px, em, rem, vw, vh, fr und mehr. Enthält Beispiele, Browser-Unterstützung und Verwendungszweck für jede Einheit. | |
|---|---|---|
vwViewport | 1% of viewport width | |
vhViewport | 1% of viewport height | |
vminViewport | 1% of the smaller viewport dimension | |
vmaxViewport | 1% of the larger viewport dimension | |
svhViewport (dynamic) | Small viewport height (excludes mobile browser chrome) | |
dvhViewport (dynamic) | Dynamic viewport height (updates with browser chrome) | |
lvhViewport (dynamic) | Large viewport height (browser chrome hidden) | |
svw / dvw / lvwViewport (dynamic) | Small/Dynamic/Large viewport width variants |
| Einheit | Vergleichen Sie alle CSS-Einheiten, einschließlich px, em, rem, vw, vh, fr und mehr. Enthält Beispiele, Browser-Unterstützung und Verwendungszweck für jede Einheit. | |
|---|---|---|
cqwContainer | 1% of query container's inline size (width) | |
cqhContainer | 1% of query container's block size (height) | |
cqiContainer | 1% of container's inline size | |
cqbContainer | 1% of container's block size | |
cqminContainer | 1% of smaller container dimension | |
cqmaxContainer | 1% of larger container dimension |
| Einheit | Vergleichen Sie alle CSS-Einheiten, einschließlich px, em, rem, vw, vh, fr und mehr. Enthält Beispiele, Browser-Unterstützung und Verwendungszweck für jede Einheit. | |
|---|---|---|
frGrid | Fraction of available grid track space | |
min-contentGrid keyword | Smallest content fits without overflow | |
max-contentGrid keyword | Content's ideal unconstrained width | |
fit-content(N)Grid function | Clamps max-content to N maximum | |
minmax(N, M)Grid function | Track size between minimum N and maximum M |
Skaliert mit :root-Schriftgröße, respektiert Browser-Einstellungen des Benutzers, konsistent über Komponenten
px vermeiden — respektiert keine Schriftgrößeneinstellungen des Benutzers
rem für konsistenten globalen Abstand; em für Abstände relativ zur Komponentenschriftgröße
px für Komponenten vermeiden, die skalieren
% für fließende Container; ch (45–75ch) für optimale Prosazeilenlänge
Feste px für die Hauptinhaltbreite vermeiden
dvh vermeidet Überlappung durch mobile Browser-Chrome; vh ist für nur-Desktop geeignet
100vh allein auf Mobilgeräten vermeiden — URL-Leiste beschneidet Inhalt
Verteilt verbleibenden Platz proportional; sauberer als % in Grid
fr nicht naiv mit festen px-Spalten kombinieren
Pixelgenaues Rendering; muss nicht mit Text skalieren
Keine relativen Einheiten notwendig
Verwenden Sie rem für Schriftgrößen. rem ist relativ zur Schriftgröße des Root-Elements (normalerweise 16px), was es einfach macht, die gesamte Benutzeroberfläche durch Änderung der Root-Schriftgröße zu skalieren. Dies respektiert auch die Schriftgrößeneinstellungen des Browsers, was die Zugänglichkeit verbessert. Verwenden Sie px nur für Rahmen, Schatten und Elemente, die nicht skalieren sollen.
em ist relativ zur Schriftgröße des übergeordneten Elements, was sich in verschachtelten Elementen aufaddieren kann. rem ist relativ zur Schriftgröße des Root-Elements ('<'html>), was es vorhersehbarer macht. Für Schriftgrößen wird rem generell bevorzugt. em ist nützlich für Padding und Margins, die mit der eigenen Schriftgröße der Komponente skalieren sollen.
Verwenden Sie vw/vh für Elemente, die relativ zum Browser-Viewport dimensioniert werden sollen (z.B. Hero-Sections, Modals). Verwenden Sie Prozentsätze für Elemente, die relativ zu ihrem übergeordneten Container dimensioniert werden sollen. dvh (dynamic viewport height) wird gegenüber vh auf Mobilgeräten bevorzugt, wo die Adressleiste die Höhe beeinflusst.
Container-Query-Einheiten (cqw, cqh, cqi, cqb) sind relativ zur Größe eines Container-Elements statt zum Viewport. Sie erfordern einen Container-Kontext (container-type: inline-size). Sie eignen sich ideal für wirklich responsive Komponenten, die sich an ihre Container-Größe anpassen müssen, unabhängig von der Viewport-Größe.