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

·  阅读 50
get css中的clamp()函数,好用到起飞!

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

CSS clamp语法

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

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

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

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

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

vmin和vmax

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

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

image.png

image.png

兼容性

从 caniuse 网站可以看出,不支持IE11image.png

结论

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

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改