get css中的clamp()函数，好用到起飞

zhezhongyun 2025-05-16 18:02 2 浏览

CSS 中有大量令人惊叹的属性和特性，但似乎没有人谈论的是clamp函数。这个函数让我们可以对任何 CSS 属性执行min-width, max-width, 和之类的操作。

CSS clamp语法

clamp() 函数接收三个用逗号分隔的[表达式]作为参数，按最小值、首选值、最大值的顺序排列。下面是一个实际中的clamp函数示例。

.class {
  font-size: clamp(1rem, 2vmin, 3rem);
}

上面的代码将我们设置font-size为2vmin，但它也指定了的最小值和最大值font-size。这与执行以下操作相同。

.class {
  font-size: 2vmin;
  min-font-size: 1rem;
  max-font-size: 3rem;
}

然而，这之所以如此好用，是因为min-font-size。max-font-size实际上并不存在，但使用clamp函数我们可以模仿它们。通过使用clamp，我们的font-size 将以 2vmin 的比例随屏幕大小缩放，但它永远不会小于 1rem，也永远不会大于 3rem。可能很多人会对vmin和vmax是干什么的，在这里也顺便解释下！

vmin和vmax

vh和vm总是与视口的高度和宽度有关，与之不同的，vmin和vmax是与当下屏幕的宽度和高度的最大值或最小值有关，取决于哪个更大和更小。

「例如，如果浏览器设置为1100px宽、700px高，1vmin会是较小的7px，而1vmax将是较大的11px。然而，如果宽度设置为800px，高度设置为1080px，1vmin将会是较小的8px，而1vmax将会是较大的10.8px」

兼容性

从 caniuse 网站可以看出，「不支持IE11」。

结论

此功能非常易于使用和理解，它也为许多以前不可能的可能性打开了大门。

CSS 语法

上一篇：Google Chrome终于支持CSS Variables了
下一篇：五大顶级CSS性能优化工具，值得程序员一试!

get css中的clamp()函数，好用到起飞

CSS clamp语法

vmin和vmax

兼容性

结论

相关推荐

b端详情页:各种信息聚集地，设计师要如何规划这一亩三分地呢

接口测试遇到500报错?别慌，你的头部可能有点问题

漏洞系列一一看我一招征服漏洞 SSRF

Web前端需要学什么?Web前端开发需要学习哪些?

前端Flex布局可视化布局工具介绍，vue和html5快速设计利器

「资讯」为强迫用户使用Edge浏览器，微软又出新招数

HTML 简介（html简介及优缺点）

关于HTML5被简称做H5，你怎么看?（html5缩写）

HBuilderX，uni-app创建HTML5项目，同时支持浏览器和移动端

现在页面实时聊天都使用Websocket技术实现吗?