CSS 函数 - clamp()

CSS 的clamp()函数将值保持在由最小值和最大值定义的范围内。

它有三个参数：最小值、首选值和最大允许值。

可能的值

clamp(min, val, max) 函数采用三个逗号分隔的表达式作为参数。

min - 最小值表示最小或最负的值，是允许范围的下限。如果首选值低于此最小值，则使用最小值。
val - 首选值是在最小值和最大值定义的范围内使用的表达式。
max - 如果首选值超过此上限，则将最大值分配给属性，即允许表达式的最大（最正）值。

clamp()中的表达式可以包括数学函数、字面值或其他有效的参数类型。允许直接加、减、乘和除。

可以使用括号来指定计算顺序。

要点

表格尺寸（宽度和高度）中的百分比在自动和固定布局表格中都被解释为列、列组、行、行组和单元格的auto。
允许在 CSS 表达式中嵌套max()和min()函数，其中内部函数被视为括号。

完整的数学表达式，包括加法、减法、乘法和除法，都可以在嵌套的max()和min()函数中使用，而无需calc()函数。
表达式可以包含加法（+）、减法（-）、乘法（*）和除法（/）运算符，遵循通常的优先级规则。

应在+和-操作数的两侧添加空格。操作数可以是任何语法<length>值并使用不同的单位。可以使用括号来控制计算顺序。
通常可能需要在clamp()函数中使用min()和max()函数。

返回值

clamp(MIN, VAL, MAX)函数解析为max(MIN, min(VAL, MAX))。

该函数返回<length>、<frequency>、<angle>、<time>、<percent>、<number>或<integer>类型的返回值，具体取决于给定的参数。

语法

clamp( <calc-sum>#{3} )

井号 (#) 标记乘数表示该实体可以重复一次或多次（此处为 3 次），但每次出现都由逗号 (,) 分隔。

CSS clamp() - 基本示例

以下示例演示了 CSS clamp() 函数的使用，用于设置响应式盒子宽度，确保它们在指定的最小值和最大值之间缩放，同时适应父容器的宽度。

调整浏览器窗口大小，查看盒子的宽度如何通过 clamp 函数根据视口进行调整。

<html>
<head>
<style>
   .container {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
   }
   .box {
      width: clamp(200px, 40%, 300px);
      height: 150px;
      margin: 20px;
      background-color: lightblue;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 18px;
      font-weight: bold;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="box">Box 1</div>
      <div class="box">Box 2</div>
      <div class="box">Box 3</div>
      <div class="box">Box 4</div>
   </div>
</body>
</html>

打印页面