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 den 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 Dividende, durch einen zweiten Operand, den Divisor, geteilt wird. Er übernimmt immer das Vorzeichen des Dividenden.

Hinweis: Um über die Einheit rem zu lesen, besuchen Sie die Seite <length>.

Zum Beispiel gibt die CSS-Funktion rem(27, 5) den Rest von 2 zurück. Beim Teilen von 27 durch 5 ist das Ergebnis 5 mit einem Rest von 2. Die vollständige Berechnung lautet 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 denselben Typ haben, number, dimension, oder <percentage>, damit die Funktion gültig ist. Auch wenn die Einheiten in den beiden Parametern nicht gleich sein müssen, müssen sie vom gleichen Dimensionstyp sein, wie zum Beispiel <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 Dividenden darstellt.
divisor: Eine Berechnung, die sich zu einem <number>, <dimension>, oder <percentage> auflöst und den Divisor darstellt.

Rückgabewert

Gibt ein <number>, <dimension>, oder <percentage> zurück (entsprechend dem Typ der Parameter), das den Rest darstellt, also das übrigbleibende Ergebnis der Operation.

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

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden