2022- CSS 函数代码了

Clamp(), Max(), 和 Min() 函数

— clamp() 函数的作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。它接收三个参数：最小值、首选值、最大值。

流体的尺寸和定位

在下面这个例子中，有一个手机样式，同时有两张图片放置在上面，如下所示:

当容器的宽度变小时，我们要缩小图片的尺寸，这样才不会变形。一般使用百分比单位来解决，如 width: 20%，但是这种方式没有给我们太多的控制。

我们希望能够有一个流体尺寸，要求有最小值和最大值，这就是 clamp 出场的地方。

.section-image {
  width: clamp(70px, 80px + 15%, 180px);
}
1
2
3

demo地址：https://codepen.io/shadeed/pen/qBYPdOq?editors=1100

装饰性元素

有时候，我们需要在页面边角加一些修饰元素，该修饰元素需要具有响应式，比如 PC 端是这样的（黑点部分）：

然后在移动端是长这样的：

.decorative--1 {
  left: 0;
}

.decorative--2 {
  right: 0;
}

@media (max-width: 600px) {
  .decorative--1 {
    left: -8rem;
  }

  .decorative--2 {
    right: -8rem;
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

虽然这样做可以，但我们可以 clamp()函数，这样更简洁：

 .decorative--1 {
    left: clamp(-8rem, -10.909rem + 14.55vw, 0rem);
  }

  .decorative--2 {
    right: clamp(-8rem, -10.909rem + 14.55vw, 0rem);
  }
1
2
3
4
5
6
7

demo地址：事例地址：https://codepen.io/shadeed/pen/LYmzVZW?editors=1100