---
# System prepended metadata

title: 'clamp(min, val, max) 導公式筆記'
tags: [Css]

---

---
tags: Css
---
# clamp(min, val, max) 導公式筆記

ex.
我在1920px螢幕寬時為100px寬
而在1440px螢幕寬(含)以下為20px寬

---

## 使用clamp() 在scss編譯時報錯 解法
**clamp(min, val, max)**

→ 編譯 ERROR
```css
clamp(1.25rem, 16.7vw - 13.7rem, 6.25rem);
```

→ **改用calc() 成功**
```css
clamp(1.25rem, calc(16.7vw - 13.7rem), 6.25rem);
```
---

## → 若想要支援程度較好的寫法 使用min() max()組合
表達式：max(MIN, min(VAL, MAX))
```css
MAX(1.25rem, MIN(calc(16.7vw - 13.7rem), 6.25rem));
MAX(20px , MIN(calc(16.7vw - 13.7rem), 100px));
```
兩種都可以 只是換單位


> P.S.
> scss裡想使用min() max() 因被scss拿去使用了 故編譯ERROR
> 可利用css不分大小寫的特性 改為Min() Max() 或 MIN() MAX()


------------------------------------

## 支援程度最好的語法 calc() 
**等同clamp()裡的val 缺點是無法有大小限制 需要用斷點控制**

**→ VAL(首選值)表達式 作法一**
> calc([ '最小尺寸'] + ([ '最大尺寸'- '最小尺寸']) * ((100vw - [ '最小視口']) / ([ '最大視口'- '最小視口']));

VAL(首選值)表達式 帶入值
```css
calc(20px + (100 - 20) * ((100vw - 1440px) / (1920 - 1440));
```

------------------------------------

**→ VAL(首選值)表達式 作法二(待確認)**
> calc(( (斜率*100)vw + (交點)rem));

> P.S.
> 斜率 slope = ( '最大尺寸' - '最小尺寸' ) / ( '最大視口' - '最小視口' );
> 交點 yAxisIntersection = - ( '最小視口' * 斜率 ) + '最小尺寸' 