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>

列印頁面