CSS - 數學函數：初學者指南

您好，未來的 CSS 巔峰大師！今天，我們將踏上一段令人興奮的旅程，探索 CSS 數學函數的世界。別擔心如果您之前從未寫過一行代碼——我將成為您的友好導遊，我們會一步一步地學習。到了這個教學的結尾，您將會對僅僅使用 CSS 中的幾個數學技巧能夠做到的事情感到驚奇！

CSS - Math Functions

基礎算術函數

我們從基礎開始。CSS 提供了一些簡單的算術函數，這些函數在設計網頁時可以讓我們的生活變得更加輕鬆。這些函數讓我們可以直接在 CSS 代碼中進行計算。

`calc()` 函數

calc() 函數是 CSS 數學中的瑞士軍刀。它允許您直接在 CSS 中進行基本的算術運算。我們來看一個例子：

.box {
width: calc(100% - 20px);
}

在這個例子中，我們將具有類別 "box" 的元素的寬度設置為其父元素寬度的 100%，減去 20 像素。當您想要創建能夠適應不同屏幕尺寸的響應式佈局時，這非常有用。

讓我們分解一下：

100% 代表父元素的完整寬度。
-20px 從這個寬度中減去 20 像素。
calc() 函數為我們執行這個計算。

您可以在 calc() 中使用所有四個基本算術運算：加法 (+)、減法 (-)、乘法 (*) 和除法 (/)。這裡有另一個例子：

.column {
width: calc(33.33% - 10px);
margin-right: calc(10px * 2);
}

在這個案例中，我們正在創建一個三列佈局。每個列佔據三分之一寬度（33.33%）減去 10 像素的間距，並且我們添加了一個右邊距，其大小是間距的兩倍。

比較函數

現在我們已經掌握了基礎知識，讓我們來學習一些比較函數。這些函數對於創建有條件適應不同情況的響應式設計非常有用。

`min()` 函數

min() 函數返回一組值中最小的值。它非常適合用於設置元素大小的最大限制。例如：

.responsive-text {
font-size: min(5vw, 30px);
}

這將設置字體大小為視口寬度的 5%，但從不會超過 30 像素。這是一種很好的方法，可以讓文字響應式而不會在大屏幕上變得過大。

`max()` 函數

正如您可能猜到的，max() 函數的作用與 min() 相反。它返回一組值中最大的值。這是您可能使用它的方法：

.responsive-image {
width: max(300px, 50%);
}

這保證了即使容器的 50% 小於 300 像素，圖像的寬度也始終至少為 300 像素。

`clamp()` 函數

clamp() 函數就像是 min() 和 max() 的組合。它接受三個值：最小值、偏好值和最大值。這是一個例子：

.responsive-element {
width: clamp(200px, 50%, 500px);
}

這將寬度設置為容器的 50%，但確保它從不會小於 200px 或大於 500px。

高級 CSS 數學函數

現在我們已經介紹了基礎知識，讓我們深入一些更高级的函數，這些函數可以真正將您的 CSS 技能提升到下一个水平。

`abs()` 函數

abs() 函數返回一個數字的絕對值。這在動畫中非常有用，或者當您想要確保一個值始終為正時。這是一個例子：

.box {
transform: translateX(abs(var(--x)));
}

這會根據 --x 自定義屬性的值水平移動盒子，始終朝正方向，無論 --x 是正還是負。

`round()` 函數

round() 函數將一個數字四捨五入到最接近的整數。這對於將值固定到網格非常有用。例如：

.grid-item {
width: calc(round(100% / 3));
}

這將創建一個三列佈局，其中每個列的寬度四捨五入到最接近的整數百分比。

遞增價值函數

遞增價值函數讓您可以創建在離散步驟中變化的值，而不是平滑變化。這些可以非常好用於創建有趣的視覺效果。

`mod()` 函數

mod() 函數返回除法後的餘數。這可以用於創造重複的圖案。這是一個例子：

.striped-background {
background-color: hsl(0, 0%, mod(var(--i) * 10, 100)%);
}

這會創造一個條紋背景，其中每條紋的亮度由其索引（--i）決定，每 10 條紋重複一次。

三角函數

最後但同樣重要的是，讓我們來了解一下一些三角函數。這些函數對於創建复杂的動畫和佈局非常有力。

`sin()` 和 `cos()` 函數

sin() 和 cos() 函數分別返回角度的正弦和餘弦值。這些通常用於動畫中。這是一個簡單的例子：

@keyframes orbit {
from {
transform: rotate(0deg) translateX(100px) rotate(0deg);
}
to {
transform: rotate(360deg) translateX(100px) rotate(-360deg);
}
}

.orbiting-element {
animation: orbit 5s linear infinite;
}

這創造了一個運行的動畫，其中元素圍繞一個中心點移動。

函數參考表

這裡是一個我們所介紹的所有 CSS 數學函數的快速參考表：

函數	描述	示例
calc()	執行基本的算術運算	calc(100% - 20px)
min()	返回最小的值	min(5vw, 30px)
max()	返回最大的值	max(300px, 50%)
clamp()	在最小值和最大值之間固定一個值	clamp(200px, 50%, 500px)
abs()	返回絕對值	abs(var(--x))
round()	四捨五入到最接近的整數	round(100% / 3)
mod()	返回除法後的餘數	mod(var(--i) * 10, 100)
sin()	返回角度的正弦值	sin(45deg)
cos()	返回角度的餘弦值	cos(45deg)

就这样！我們已經介紹了很多內容，從基本的算術到高级的三角函數。記住，掌握這些的關鍵是練習。嘗試將它們整合到您的 CSS 中，嘗試不同的組合，很快您就能夠輕鬆地創建出令人驚艷的響應式設計。開心地編程！

Credits: Image by storyset

CSS - 數學函數：初學者指南

基礎算術函數

calc() 函數

比較函數

min() 函數

max() 函數

clamp() 函數