CSS 的 clamp() 函數是一個強大的工具，用于創建響應式且范圍可控的動態值。它結合了min()?和max() 的邏輯，允許你定義一個值在最小值和最大值之間動態調整。

語法為：

clamp(最小值, 首選值, 最大值)；

工作原理：

當?首選值?在?最小值?和?最大值?之間時，直接使用?首選值。

當?首選值?小于?最小值?時，使用?最小值。

當?首選值?大于?最大值?時，使用?最大值。

使用場景：

1. 響應式字體大小

.element {font-size: clamp(1rem, 2.5vw, 1.5rem);
}

• 最小值：1rem（小屏幕）
• 首選值：2.5vw（隨視口寬度變化）
• 最大值：1.5rem（大屏幕）

效果：字體大小在?1rem?到?1.5rem?之間動態調整，避免過大或過小。

2. 動態容器寬度

.container {width: clamp(300px, 50%, 800px);
}

• 最小值：300px
• 首選值：50%（父容器寬度的 50%）
• 最大值：800px

效果：容器寬度在?300px?到?800px?之間自適應，中間按父容器寬度 50% 調整。

3. 間距控制

.padding {padding: clamp(10px, 2vh, 30px);
}

• 間距隨視口高度（vh）變化，但始終在?10px?到?30px?之間。

4.更精細的控制

.element {font-size: clamp(1rem, calc(1rem + 1vw), 1.5rem);
}

可以結合?calc()函數。

calc的使用方法：css 的 calc() 值如何使用