CSS語法 - max、min、clamp 數學函式

透過CSS語法可進行動態的數學函數運算。

max()

定義了運算最大值，作用在於限制最小值。

例如: div 的寬度為50%，最小寬度為300px

div {
    width: max(50%, 300px);  
}

等同於

div {
    width: 50%;
    min-width: 300px;
}

min()

定義了數學運算的最小值，作用在於限制最大值。

例如: div 的寬度為50%，最大寬度為300px

div {
    width: min(50%, 300px); 
}

等同於

div {
    width: 50%;
    max-width: 300px;
}

clamp()

clamp(最小值, 中間值, 最大值)
返回一個區間範圍的值。

例如: div 的最小寬度為300px，最大寬度為500px，在範圍內則寬度為50%

div {
    width: clamp(300px, 50%, 500px); 
}

等同於

div {
    width: 50%;
    min-width: 300px;
    max-width: 500px;
}

參考資料 :
oxxostudio