rem()

Baseline 2024

Новое

С мая 2024 года эта функция работает на последних устройствах и версиях браузеров. Возможно, эта функция не будет работать на старых устройствах или браузерах.

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

Примечание: Чтобы узнать о единицах rem, см. страницу <length>.

Например, функция 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> ]*  

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

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

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

Спецификация
CSS Values and Units Module Level 4 # funcdef-rem

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

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`rem`	125	125	118	111	15.4	125	118	83	15.4	27.0	125

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/rem