CSS clamp() 函数

CSS clamp() 语法

在 CSS 中，clamp() 函数用于限制一个 CSS 属性的值在指定范围。比如，它可以设置一个元素的尺寸（如 width、height、font-size 等）不小于指定最小值，并且不大于指定最大值。

语法：

clamp(min, val, max);

说明：

min 是最小值，值不能小于这个数；val 是首选值，浏览器会尽量使用这个值；max 是最大值，值不能大于这个数。

clamp() 函数会根据首选值（val）与最小值（min）和最大值（max）的比较来决定最终返回的值：

如果首选值（val）大于最大值，则函数返回最大值。
如果首选值（val）小于最小值，则函数返回最小值。
否则，函数返回首选值（val）。

比如在下面代码中，14px 是最小值，5vw 是首选值，24px 是最大值。浏览器会根据视口宽度来计算 5vw，不过它永远不会小于 14px 或大于 24px。

font-size: clamp(14px, 5vw, 24px);

对于 clamp() 函数，小伙伴们还需要清楚以下几点。

clamp() 函数必须指定 3 个值：
- 最小值（min）。
- 首选值（val）。
- 最大值（max）。
clamp() 函数可以接受不同类型的值，比如：
- 长度（如 100px、10em、50% 等）。
- 角度（如 30°、0.5rad）。
- 时间（如 2s、500ms）。
- 频率（如 100Hz、2kHz）。
- 数字（如 2，没有单位的数值）。
clamp() 函数可以混合使用不同单位，然后浏览器会自动处理不同单位的值。
clamp() 函数可以与其他函数（如 calc() 或 var() 等）嵌套使用。

CSS clamp() 摘要

属于	CSS 函数
使用频率	中
兼容性	查看
官方文档	查看
MDN	查看

CSS clamp() 示例

接下来，我们通过几个简单的例子来讲解一下 CSS clamp() 函数是如何使用的。

示例 1：clamp() 基本用法

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        div {
            width: clamp(100px, 50%, 500px);
            height: 100px;
            background-color: lightskyblue;
        }
    </style>
</head>
<body>
    <div>绿叶网</div>
</body>
</html>

页面效果如下图所示。

clamp() 基本用法

分析：

在上面例子中，我们将 div 元素的宽度设置为 clamp(100px, 50%, 500px)。也就是说，div 的宽度将在 100px 和 500px 之间，首选值为 50%。

当 50% 小于 100px 时，div 的宽度为 100px。
当 50% 大于 500px 时，div 的宽度为 500px。
否则，div 的宽度为 50%。

示例 2：clamp() 结合 CSS 变量

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        :root {
            --min-width: 100px;
            --preferred-width: 50%;
            --max-width: 500px;
        }
        div {
            width: clamp(var(--min-width), var(--preferred-width), var(--max-width));
            height: 100px;
            background-color: lightskyblue;
        }
    </style>
</head>
<body>
    <div>绿叶网</div>
</body>
</html>

页面效果如下图所示。

clamp() 与 CSS 变量结合

分析：

在这个例子中，我们使用了 CSS 变量来定义 clamp() 函数的最小值、首选值和最大值。使用 CSS 变量这种方式，可以使得代码更具有可维护性。

示例 3：clamp() 实现响应式字体大小

运行代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        body {
            font-size: clamp(16px, 4vw, 24px);
        }
    </style>
</head>
<body>
    <p>绿叶网 - 为好教程，全力以赴。</p>
</body>
</html>

页面效果如下图所示。

clamp() 用于响应式字体大小

分析：

font-size: clamp(16px, 4vw, 24px); 表示 font-size 最小为 16px，最大为 24px。其中，4vw 代表的是视口宽度的 4%。