css中好用的clamp()函數

clamp() 函數的作用是把一個值限制在一個上限和下限之間，當這個值超過最小值和最大值的范圍時，在最小值和最大值之間選擇一個值使用。

語法

clamp() 函數接收三個用逗號分隔的表達式作為參數，按最小值、首選值、最大值的順序排列。

{
    font-size: clamp(20px, 18px, 40px); 
    width: clamp(100px, 100%, 200px);
}

• 當首選值比最小值要小時，則使用最小值。
• 當首選值介於最小值和最大值之間時，用首選值。
• 當首選值比最大值要大時，則使用最大值。

兼容性

https://caniuse.com/?search=clamp
從 caniuse 網站可以看出，不支持IE11。