-
Notifications
You must be signed in to change notification settings - Fork 22.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
rem()
- New CSS functional notation (#23183)
* `rem()` - New CSS functional notation * Fix lint issues * Update code examples * Add more code examples covering additional use cases * Update index.md * Return value * Apply suggestions from code review Co-authored-by: StyleShit <32631382+StyleShit@users.noreply.github.com> * Update index.md * Update index.md * Apply suggestions from code review * Update index.md * Apply suggestions from code review * Apply suggestions from code review Co-authored-by: Estelle Weyl <estelle@openwebdocs.org> * Update index.md * Add examples with calculations * lint Co-authored-by: StyleShit <32631382+StyleShit@users.noreply.github.com> Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>
- Loading branch information
1 parent
7cebd28
commit a05165e
Showing
1 changed file
with
83 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,83 @@ | ||
--- | ||
title: rem() | ||
slug: Web/CSS/rem | ||
page-type: css-function | ||
tags: | ||
- CSS | ||
- CSS Function | ||
- Function | ||
- Math | ||
- Reference | ||
- Web | ||
- rem | ||
- Experimental | ||
browser-compat: css.types.rem | ||
--- | ||
|
||
{{CSSRef}}{{SeeCompatTable}} | ||
|
||
The **`rem()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Functions) returns a remainder left over when the first parameter is divided by the second parameter, similar to the JavaScript [remainder operator (`%`)](/en-US/docs/Web/JavaScript/Reference/Operators/Remainder). 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. | ||
|
||
> 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 | ||
|
||
```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 | ||
|
||
The `rem(dividend, divisor)` function accepts two comma-separated values as its parameters. Both parameters must have the same type, [number](/en-US/docs/Web/CSS/number), [dimension](/en-US/docs/Web/CSS/dimension), or [percentage](/en-US/docs/Web/CSS/percentage), for the function to be valid. While the units in the two parameters don't need to be the same, they do need of the same dimension type, such as {{cssxref("length")}}, {{cssxref("angle")}}, {{cssxref("time")}}, or {{cssxref("frequency")}} to be valid. | ||
|
||
- `dividend` | ||
- : A calculation that resolves to a {{CSSxREF("<number>")}}, {{CSSxREF("<dimension>")}}, or {{CSSxREF("<percentage>")}} representing the dividend. | ||
|
||
- `divisor` | ||
- : A calculation that resolves to a {{CSSxREF("<number>")}}, {{CSSxREF("<dimension>")}}, or {{CSSxREF("<percentage>")}} representing the divisor. | ||
|
||
### Return value | ||
|
||
Returns a {{CSSxREF("<number>")}}, {{CSSxREF("<dimension>")}}, or {{CSSxREF("<percentage>")}} (corresponds to the parameters' type) representing the remainder, that is, the operation left over. | ||
|
||
- If `divisor` is `0`, the result is `NaN`. | ||
- If `dividend` is `infinite`, the result is `NaN`. | ||
- If `dividend` is positive the result is positive (`0⁺`), and if `dividend` is negative the result is negative (`0⁻`). | ||
|
||
### Formal syntax | ||
|
||
{{CSSSyntax}} | ||
|
||
## Specifications | ||
|
||
{{Specifications}} | ||
|
||
## Browser compatibility | ||
|
||
{{Compat}} | ||
|
||
## See also | ||
|
||
- {{CSSxRef("round")}} | ||
- {{CSSxRef("mod")}} |