rem()
Baseline 2024Newly 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
/* 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 ErgebnisNaN
. - Wenn
dividend
unendlich ist, ist das ErgebnisNaN
. - Wenn
dividend
positiv ist, ist das Ergebnis positiv (0⁺
), und wenndividend
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 GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
rem() |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support