rem()

Baseline 2024
Newly available

Since May 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die rem() CSS Funktion gibt einen Restwert zurück, der übrig bleibt, wenn der erste Parameter durch den zweiten Parameter geteilt wird, ähnlich dem JavaScript Restoperator (%). Der Rest ist der Wert, der übrig bleibt, wenn ein Operand, der Dividend, durch einen zweiten Operand, den Divisor, geteilt wird. Er nimmt immer das Vorzeichen des Dividenden an.

Hinweis: Um mehr über die Einheit rem zu erfahren, siehe die Seite <length>.

Zum Beispiel, die CSS-Funktion rem(27, 5) gibt den Rest von 2 zurück. Wenn 27 durch 5 geteilt wird, ergibt das 5 mit einem Rest von 2. Die vollständige Berechnung ist 27 / 5 = 5 * 5 + 2.

Syntax

css
/* Unitless <number> */
line-height: rem(21, 2); /* 1 */
line-height: rem(14, 5); /* 4 */
line-height: rem(5.5, 2); /* 1.5 */

/* Unit based <percentage> and <dimension> */
margin: rem(14%, 3%); /* 2% */
margin: rem(18px, 5px); /* 3px */
margin: rem(10rem, 6rem); /* 4rem */
margin: rem(26vmin, 7vmin); /* 5vmin */
margin: rem(1000px, 29rem); /* 72px - if root font-size is 16px */

/* Negative/positive values */
rotate: rem(200deg, 30deg); /* 20deg */
rotate: rem(140deg, -90deg); /* 50deg */
rotate: rem(-90deg, 20deg); /* -10deg */
rotate: rem(-55deg, -15deg); /* -10deg */

/* Calculations */
scale: rem(10 * 2, 1.7); /* 1.3 */
rotate: rem(10turn, 18turn / 3); /* 4turn */
transition-duration: rem(20s / 2, 3000ms * 2); /* 4s */

Parameter

Die Funktion rem(dividend, divisor) akzeptiert zwei durch Komma getrennte Werte als Parameter. Beide Parameter müssen denselben Typ besitzen, number, dimension oder <percentage>, damit die Funktion gültig ist. Obwohl die Einheiten der beiden Parameter nicht identisch sein müssen, müssen sie vom selben Dimensionstyp sein, wie z.B. <length>, <angle>, <time>, oder <frequency>, um gültig zu sein.

dividend

Eine Berechnung, die zu einem <number>, <dimension>, oder <percentage> führt, der den Dividend repräsentiert.

divisor

Eine Berechnung, die zu einem <number>, <dimension>, oder <percentage> führt, der den Divisor repräsentiert.

Rückgabewert

Gibt ein <number>, <dimension>, oder <percentage> (entspricht dem Typ der Parameter) zurück, das den Restwert repräsentiert, also das, was von der Operation übrig bleibt.

  • Wenn divisor 0 ist, ist das Ergebnis NaN.
  • Wenn dividend unendlich ist, ist das Ergebnis NaN.
  • Wenn dividend positiv ist, ist das Ergebnis positiv (0⁺), und wenn dividend negativ ist, ist das Ergebnis negativ (0⁻).

Formale Syntax

<rem()> = 
rem( <calc-sum> , <calc-sum> )

<calc-sum> =
<calc-product> [ [ '+' | '-' ] <calc-product> ]*

<calc-product> =
<calc-value> [ [ '*' | '/' ] <calc-value> ]*

<calc-value> =
<number> |
<dimension> |
<percentage> |
<calc-keyword> |
( <calc-sum> )

<calc-keyword> =
e |
pi |
infinity |
-infinity |
NaN

Spezifikationen

Specification
CSS Values and Units Module Level 4
# funcdef-rem

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
rem()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

Siehe auch