--- 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 = - ( '最小視口' * 斜率 ) + '最小尺寸'