Функция CSS `rem()`

Функция rem() CSS функций возвращает остаток от деления первого параметра на второй, подобно оператору остатка (%) в JavaScript. Остаток — это значение, остающееся после деления одного операнда, делимого, на второй операнд, делитель. Его знак всегда совпадает со знаком делимого.

Например, функция CSS rem(27, 5) возвращает остаток от 2. При делении 27 на 5 результат равен 5 с остатком 2. Полное вычисление: 27 / 5 = 5 * 5 + 2.

Синтаксис

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

Параметры

Функция rem(dividend, divisor) принимает два значения, разделённых запятой. Для корректной работы функции оба параметра должны иметь одинаковый тип: число, размерность или <percentage>. Единицы измерения в двух параметрах могут различаться, но их тип размерности должен совпадать: например, это могут быть <length>, <angle>, <time> или <frequency>.

dividend

Вычисление, результатом которого является <number>, <dimension> или <percentage>, представляющее делимое.

divisor

Вычисление, результатом которого является <number>, <dimension> или <percentage>, представляющее делитель.

Возвращаемое значение

Возвращает <number>, <dimension> или <percentage> (соответствующее типу параметров), представляющее остаток, то есть оставшуюся часть операции.

• Если divisor равно 0, результат — NaN.
• Если dividend равно infinite, результат — NaN.
• Если dividend положительное, результат положительный (0⁺), а если dividend отрицательное, результат отрицательный (0⁻).

Формальный синтаксис

<rem()> = 
  rem( <calc-sum>, <calc-sum> )

<calc-sum> = 
  <calc-product> [ [ '+' | '-' ] <calc-product> ]*

<calc-product> = 
  <calc-value> [ '*' <calc-value> | '/' <number> ]*

<calc-value> = 
  <number> |
  <dimension> |
  <percentage> |
  <calc-constant> |
  ( <calc-sum> )

<calc-constant> = 
  e |
  pi |
  infinity |
  -infinity |
  NaN

Спецификации

Совместимость с браузерами

См. также

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