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.

最用场景包括:

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

2. 搭配 Grid + repeat + minmax 防止 vw 太小时 overflow 问题, 参考: Youtube – Easier layouts with these 3 Grid tips

max()

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

clamp()

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

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

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

不能搭配 min/max/fit-content 哦

max(max-content, 100%) 这样是不支持的.

max, min, clamp 搭配 min-content, max-content, fit-content 都不行.