CSS – min(), max(), clamp()

介绍

它们类似 calc(). 用来通过 formula 输出一个值. 用于 font-size, width, height 之类的, 这些地方.

非常适合用来做 RWD 哦 (特别是 font-size).

参考:

CSS中 min() max() clamp()函数及使用场景详解

Kevin Powell – 3 modern CSS techniques for responsive design

min()、max() 和 clamp()：今天要使用的三个逻辑 CSS 函数

utopia RWD font 神器, 有了它就不用写 media query font-size 了哦

min()

类似 JS 的 Math.min(), 一堆数字中取最小的出来

h1 {
  font-size: min(100px, 400px - 350px, 5rem, 10%);
}

min() 的使用方式是, 给它多个 sizes, 它把每一个计算完成后取最小的来用. 

它的参数直接支持 operator 400px - 350px 哦. 

10% 的意思是 original font-size 的 10%, 比如 h1 是 60px 那么就是 6px.

最常见的场景是: 

我有一个动态的值, 比如 %, vh 这种, 但是我不希望它太大, 所以就 min(dynamic_value, max_allow_value) 这样用.

max()

max 和 min 工作方式完全一样, 只是最后是取最大的值.

clamp()

clamp 类似 between, 不能小于 x, 不能大于 y

h1 {
  font-size: clamp(100px, 250px, 200px);
}

中间 250px 是动态的值, 不能小于 100px, 不能大于 200px. 所以最终输出的是 200px.