`rem()` CSS-Funktion

Baseline 2024

Neu verfügbar

Seit May 2024 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.

Die rem() CSS Funktion gibt einen Rest 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 übernimmt immer das Vorzeichen des Dividenden.

Hinweis: Informationen zur Einheit rem finden Sie auf der Seite <length>.

Zum Beispiel gibt die CSS-Funktion rem(27, 5) den Rest von 2 zurück. Wenn 27 durch 5 geteilt wird, beträgt das Ergebnis 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 ihre Parameter. Beide Parameter müssen vom gleichen Typ sein, number, dimension oder <percentage>, damit die Funktion gültig ist. Während die Einheiten in den beiden Parametern nicht gleich sein müssen, müssen sie jedoch vom gleichen Dimensionstyp sein, wie etwa <length>, <angle>, <time> oder <frequency>, um gültig zu sein.

dividend: Eine Berechnung, die sich zu einem <number>, <dimension> oder <percentage> auflöst und den Dividend darstellt.
divisor: Eine Berechnung, die sich zu einem <number>, <dimension> oder <percentage> auflöst und den Divisor darstellt.

Rückgabewert

Gibt einen <number>, <dimension> oder <percentage> (entsprechend dem Typ der Parameter) zurück, der den Rest darstellt, also die Operation, die übrig bleibt.

Wenn divisor 0 ist, ist das Ergebnis NaN.
Wenn dividend unendlich ist, ist das Ergebnis NaN.
Ist dividend positiv, ist das Ergebnis positiv (0⁺), und ist dividend negativ, 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