商業,創業,業務開發,自媒體經營,生活美食,時事分析。
這是我的 FB粉專 以及 IG,我也滿常使用 Threads,歡迎大家追蹤互動~
在創業、職涯、人生的路上,希望大家一起陪伴與成長。
隨著回應式網頁的普及,各大瀏覽器都已經支援 CSS min(), max(), clamp()。使用這三個 function 除了可以簡化 CSS 程式碼,更因為可以內嵌運算式,加上 CSS 目前是朝原生參數化的方向在走,在實際使用上可以有更多的想像和寫法。
min(), max(), clamp() 的官方文件在這裡
https://www.w3.org/TR/css-values-4/#comp-func
這份官方文件是 “CSS Values and Units Module Level 4″,狀態是 WD (Working Draft)。對 CSS 演進方式,和成熟過程不熟的朋友,可以參考我之前的文章 CSS 的演進方式
有個觀察點滿有趣的,WD 是四個成熟過程中最低的,也就是最不成熟的,但現在主要瀏覽器都已實作 min(), max(), clamp()。所以讀者在看一個 CSS 和它的官方文件時,該文件的成熟狀態並不代表某個 CSS 的瀏覽器支援度。
這份文件的第 11 章是 “Mathematical Expressions”
- 11.1 Basic Arithmetic: calc()
- 11.2 Comparison Functions: min(), max(), and clamp()
- 11.3 Stepped Value Functions
- 11.4 …
大概架構是這樣。calc() 大家都熟悉,瀏覽器也都支援。再來是 min(), max(), and clamp(),是本篇要聊的。11.3 之後就有很大的瀏覽器支援度問題了,可能也就是這份文件,以整份文件而言是 WD 狀態的原因。
回到 min(), max(), clamp(),我們先看 min(), max(),都是在多個參數裡,取出最小 / 最大值,例如
width: min(800px, 70%, 50vw);
隨著瀏覽器大小,70% 跟 50vw 是動態的,min() 也會動態的取三個數值的最小值。當然,如果是 max() 就是取最大值。再來,min(), max() 可以在參數裡加運算式
width: min(calc(50% - 20px), 100px);
width: min(50% - 20px, 100px); // 效果與上一行同, 可以拿掉 calc
還有一個滿常見的用法是,元素的寬度隨容器寬度比例,但不希望元素太寬,可能會這樣寫
width: 80%;
max-width: 600px;
//====== 下面一行可以取代上面兩行 =======
width: min(80%, 600px);
同理,如果希望元素的寬度隨容器寬度比例,但不希望容器縮小時元素太小,可以這樣寫
width: 20%;
min-width: 100px;
//====== 下面一行可以取代上面兩行 =======
width: max(20%, 100px);
clamp() 則是吃三個參數,依序是最小值,動態值,最大值。如果當下最小值 < 動態值 < 最大值,return 動態值。如果當下動態值 < 最小值,return 最小值。如果當下最大值 < 動態值,return 最大值。
width: clamp(100px, 30%, 500px);
width: clamp(100px, 30% - 10px, 500px); // 也可以吃運算式
接下來就是 clamp() 最厲害的應用:用它來設定 font size。傳統製作回應式網頁時,是用 media query 來設定 font size。例如螢幕寬度 300px~500px,font-size: 12px; 螢幕寬度 500px~800px,font-size: 14px; …等。但如果用 clamp() 設定 font size,一行解決,而且是「真回應式」
font-size: clamp(1rem, 1vw + 0.5rem, 3rem);
結論
min(), max(), clamp() 這 3 個 function 基本上可以應用在
- 控制元素本身的寬 / 高
- 控制元素間的 padding, margin
- 最有用的是,用 clamp() 設定 font size
而且這 3 個 function 沒有瀏覽器支援度的問題,是可以實際使用在專案的語法。需要寫前端的讀者可以參考看看。
商業,創業,業務開發,自媒體經營,生活美食,時事分析。
這是我的 FB粉專 以及 IG,我也滿常使用 Threads,歡迎大家追蹤互動~
在創業、職涯、人生的路上,希望大家一起陪伴與成長。