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 Rest zurück, der übrig bleibt, wenn der erste Parameter durch den zweiten Parameter geteilt wird, ähnlich dem JavaScript Rest-Operator (%). 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 <length> Seite.

Zum Beispiel gibt die CSS rem(27, 5) Funktion den Rest von 2 zurück. Wenn man 27 durch 5 teilt, 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 rem(dividend, divisor) Funktion akzeptiert zwei kommaseparierte 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 vom gleichen Dimensionstyp sein, wie <length>, <angle>, <time>, oder <frequency>, um gültig zu sein.

dividend

Eine Berechnung, die in eine <number>, <dimension>, oder <percentage> aufgelöst wird und den Dividend darstellt.

divisor

Eine Berechnung, die in eine <number>, <dimension>, oder <percentage> aufgelöst wird und den Divisor darstellt.

Rückgabewert

Gibt eine <number>, <dimension>, oder <percentage> (entspricht dem Typ der Parameter) zurück, die den Rest, das heißt die übrig bleibende Operation, darstellt.

  • 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

BCD tables only load in the browser

Siehe auch