比较函数 - min() & max() & clamp()

语法

函数作用
min()从传递给函数的值列表中返回最小值
max()从传递给函数的值列表中返回最大值
clamp()需要有三个逗号分隔的值，最小值、首选值和最大值。如果首选值在范围内，它将返回首选值；否则它将根据情况返回最小值或最大值。

注意：

  1. 入参里面的值都应该显式指定值单位，即使是值为 0 也应该带上相应单位，不然浏览器可能会不识别
  2. 函数列表中的值可以是一个数学表达式，不需要使用 calc() （使用了也可以）

min() 函数

取列表中的最小值

min(val1, val2, val3, ...)

max() 函数

取列表中的最大值

max(val1, val2, val3, ...)

clamp() 函数

clamp() 函数接受三个参数，即 clamp(MIN, VAL, MAX)，其中：

  • MIN 表示最小值；
  • VAL 表示首选值；
  • MAX 表示最大值。
clamp(MIN, VAL, MAX)

clamp() 函数会根据下面条件来返回不同的值：

  • 如果 VAL 在 MIN 和 MAX 之间（即 MIN < VAL < MAX），则使用 VAL 作为函数的返回值；
  • 如果 VAL 大于 MAX （即 VAL > MAX），则使用 MAX 作为函数的返回值；
  • 如果 VAL 小于 MIN （即 VAL < MIN），则使用 MIN 作为函数的返回值。

一般使用上，就是首选值（VAL）是一个相对值：

  1. 适应父容器宽，同时设置一个最小值和最大值
.child {
	width: clamp(100px, 100%, 500px);
}
  1. 适应视口宽，同时设置一个最小值和最大值
.child {
	width: clamp(100px, 50vw, 500px);
}

注意：

当 MIN 大于 MAX 时，会优先使用 MIN 值，即

clamp(500px, 100%, 100px);

/** 等价 */

500px

实践

1、min 替代 max-width

.wrapper {
    width: 100%;
    max-width: 1024px;
}

可以替换为

.wrapper { 
    width: min(1024px, 100%);
}

同理 max 函数，也可以实现 min-width 的效果

2、响应式隐藏显示元素

根据视口宽度显示隐藏元素，当视口宽度大于500px则显示，小于500px则隐藏

.toggle--visibility {
  max-width: clamp(0px, (100vw - 500px) * 1000, 100%); 
  max-height: clamp(0px, (100vw - 500px) * 1000, 1000px);
  overflow: hidden; 
}

实现原理：

核心机制：(100vw−500px)∗1000

  1. 当视口宽度 < 500px 时：
  • 100vw - 500px 为负数
  • 负数 × 1000 = 很大的负数
  • clamp(0px, 很大的负数, 100%) = 0px
  1. 当视口宽度 > 500px 时：
  • 100vw - 500px 为正数
  • 正数 × 1000 = 很大的正数
  • clamp(0px, 很大的正数, 100%) = 100%