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.
The rem() remainder operator (%). The remainder is the value left over when one operand, the dividend, is divided by a second operand, the divisor. It always takes the sign of the dividend.
Note:
To read about the unit rem, see the <length> page.
For example, the CSS rem(27, 5) function returns the remainder of 2. When dividing 27 by 5, the result is 5 with a remainder of 2. The full calculation is 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 */
Parameters
The rem(dividend, divisor) function accepts two comma-separated values as its parameters. Both parameters must have the same type, <length>, <frequency> to be valid.
dividend-
A calculation that resolves to a
<percentage>representing the dividend. divisor-
A calculation that resolves to a
<percentage>representing the divisor.
Return value
Returns a <percentage> (corresponds to the parameters' type) representing the remainder, that is, the operation left over.
- If
divisoris0, the result isNaN. - If
dividendisinfinite, the result isNaN. - If
dividendis positive the result is positive (0⁺), and ifdividendis negative the result is negative (0⁻).
Formal syntax
<rem()> =
rem( <calc-sum> , <calc-sum> )
<calc-sum> =
<calc-product> ] <calc-product> [ '*' *
<calc-value> =
|
|
pi |
NaN
Specifications
| Specification |
|---|
| CSS Values and Units Module Level 4 # funcdef-rem |
Browser compatibility
Loading…