CSS 中的数学函数

min()/max()/clamp()

和calc()函数类似，任何可以使用<length>，<frequency>，<angle>，<time>，<percentage>，<number>，<integer>数据类型的地方都可以使用min()/max()/clamp()这3个数学函数。

min()/max()/clamp()这3个数学函数和calc()函数是可以相互嵌套使用的，例如：

width: calc(min(800px, 100vw) / 6);

min()和max()函数

语法如下:

min(expression [, expression])
max(expression [, expression])

支持一个或多个表达式，每个表达式之间使用逗号分隔，max()函数返回的是最大值，min()函数返回的是最小值。

例如：

width: min(10px * 10, 10em);
width: min(calc(10px * 10), 10em);
width: min(10px * 10, var(--width));

width: max(10px * 10, 10em);
width: max(calc(10px * 10), 10em);
width: max(10px * 10, var(--width));

clamp()函数

clamp()函数作用是返回一个区间范围的值。语法如下：

clamp(MIN, VAL, MAX)

其中MIN表示最小值，VAL表示首选值，MAX表示最大值。意思是，如果VAL在MIN和MAX范围之间，则使用VAL作为函数返回值；如果VAL大于MAX，则使用MAX作为返回值；如果VAL小于MIN，则使用MIN作为返回值。

clamp(MIN, VAL, MAX)实际上等同于max(MIN, min(VAL, MAX))。

示例：

button {
    width: clamp(200px, 50vw, 600px);
}

sin()/cos()等数学三角函数

• sin()
• cos()
• tan()
• asin()
• acos()
• atan()
• atan2()

这7个三角函数中，有的函数根据角度返回对应的弧度值，有的是根据弧度值返回对应的角度值（以字母 a 打头的那几个函数）。

示例：

/* 正弦函数 */
width: calc(100px * sin(45deg));
/* 反正弦 */
transform: rotate(asin(-0.2));

mod()/rem()/round()函数

mod()函数

CSS mod()函数返回第一个参数除以第二个参数的取模结果，类似于JavaScript余数运算符（%）。
示例：

/* 数值，无单位 */
line-height: mod(7, 2); /* 1 */
line-height: mod(14, 5); /* 4 */
line-height: mod(3.5, 2); /* 1.5 */

/* 百分比或者带单位的尺寸 */
margin: mod(15%, 2%); /* 1% */
margin: mod(18px, 4px); /* 2px */
margin: mod(19rem, 5rem); /* 4rem */
margin: mod(29vmin, 6vmin); /* 5vmin */
margin: mod(1000px, 29rem); /* 72px - 如果根字号是16px */

/* 正负值 */
rotate: mod(100deg, 30deg); /* 10deg */
rotate: mod(135deg, -90deg); /* -45deg */
rotate: mod(-70deg, 20deg); /* 10deg */
rotate: mod(-70deg, -15deg); /* -10deg */

/* 计算*/
scale: mod(10 * 2, 1.7); /* 1.3 */
rotate: mod(10turn, 18turn / 3); /* 4turn */
transition-duration: mod(20s / 2, 3000ms * 2); /* 4s */

rem()函数

CSS rem()函数返回第一个参数除以第二个参数后的余数，类似于JavaScript余数运算符（%）。

示例

/* U数值，无单位 */
line-height: rem(21, 2); /* 1 */
line-height: rem(14, 5); /* 4 */
line-height: rem(5.5, 2); /* 1.5 */

/* 百分比或者带单位的尺寸 */
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 */

/* 正负值 */
rotate: rem(200deg, 30deg); /* 20deg */
rotate: rem(140deg, -90deg); /* 50deg */
rotate: rem(-90deg, 20deg); /* -10deg */
rotate: rem(-55deg, -15deg); /* -10deg */

/* 计算*/
scale: rem(10 * 2, 1.7); /* 1.3 */
rotate: rem(10turn, 18turn / 3); /* 4turn */
transition-duration: rem(20s / 2, 3000ms * 2); /* 4s */

rem和mod的区别

mod 函数生成一个为零或与除数具有相同符号的结果。
rem 函数生成一个为零或与被除数具有相同符号的结果。

round()函数

语法规则：

round( <rounding-strategy>?, <valueToRound> , <roundingInterval> )

它最多可以接收 3 个参数，并且第一个参数是可选参数：

• <rounding-strategy>：可选参数，表示舍入策略。 这可能是以下值之一：
  up: 相当于 JavaScript Math.ceil() 方法，将 valueToRound 向上舍入到 roundingInterval 最接近的整数倍。 这相当于 JavaScript Math.ceil() 方法。
  down：将 valueToRound 向下舍入为 roundingInterval 最接近的整数倍。 这相当于 JavaScript Math.floor() 方法。
  nearest：将 valueToRound 舍入为 roundingInterval 的最接近的整数倍，该倍数可以高于或低于该值。 如果 valueToRound 是上方和下方舍入目标之间的一半，则会向上舍入。 相当于 JavaScript Math.round()。
  to-zero：将 valueToRound 舍入为 roundingInterval 接近/接近零的最接近整数倍。 这相当于 JavaScript Math.trunc() 方法。
• <valueToRound>：需要被四舍五入的值。 必须是 <number>、<dimension> 或 <percentage>，或者解析为这些值之一的数学表达式。
• <roundingInterval>：舍入的间隔规则，表示最终计算值需要可以被此数值整除。 这是一个 <number>、<dimension> 或 <percentage>。

示例：

line-height: round(2.2, 1); /* 2 */
line-height: round(14.82, 1); /* 15 */
line-height: round(5.5, 1); /* 6 */

height: round(nearest, 110px, 25px); /* 最终计算值：100px */
height: round(up, 110px, 25px); /* 最终计算值：125px */
height: round(down, 120px, 25px); /* 最终计算值：100px */
height: round(to-zero, 120px, 25px); /* 最终计算值：100px */
height: round(120px, 25px); /* 最终计算值：125px */

参考

https://www.zhangxinxu.com/wordpress/?p=9372
https://www.zhangxinxu.com/wordpress/?p=10901
https://www.zhangxinxu.com/wordpress/?p=11363
https://www.cnblogs.com/coco1s/p/17676226.html