rem()

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.

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

/* 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

Browser-Kompatibilität

Siehe auch

• round()
• mod()
• <length>