rem()

基线 2024

新可用

自 2024 年 5 月起，此功能可在最新的设备和浏览器版本中使用。此功能可能在旧版设备或浏览器中无法使用。

rem() CSS 函数 返回第一个参数除以第二个参数后剩余的余数，类似于 JavaScript 余数运算符 (%)。余数是在一个操作数（被除数）除以第二个操作数（除数）时剩下的值。它始终取被除数的符号。

例如，CSS rem(27, 5) 函数返回余数 2。当 27 除以 5 时，结果为 5，余数为 2。完整的计算为 27 / 5 = 5 * 5 + 2。

语法

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

参数

rem(dividend, divisor) 函数接受两个用逗号分隔的值作为其参数。为了使函数有效，这两个参数必须具有相同的类型，数字、维度 或 <percentage>。虽然两个参数中的单位不需要相同，但它们确实需要是相同的维度类型，例如 <length>、<angle>、<time> 或 <frequency> 才能有效。

被除数

计算结果为 <number>、<dimension> 或 <percentage>，表示被除数。

除数

计算结果为 <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 值和单位模块级别 4
# funcdef-rem

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅