5.1 函式 calc()
CSS 函式提供了在樣式檔中直接執行各種操作的強大工具。calc()、min()、max() 和 clamp() 函式特別適合用來創建回應式和靈活的設計，因為它們允許執行數學運算和條件值計算。
calc() 函式用於在 CSS 中執行數學運算。它允許結合不同的單位，如像素 (px)、百分比 (%)、em、rem 等，在一個表達式中。
語法：
選擇器 {
屬性: calc(表達式);
}
使用範例
在這個範例中，塊的寬度計算為父元素寬度的 50% 減去 20 像素：
CSS
/* 塊寬度為父元素的一半減去 20px */
.block {
width: calc(50% - 20px);
}
5.2 函式 min(), max() 和 clamp()
CSS 中的 min()、max() 和 clamp() 函式
函式 min()
min() 函式接受多個值並返回其中的最小值。對於創建依情境變化的靈活尺寸很有用。
語法：
選擇器 {
屬性: min(值1, 值2);
}
範例
在這個範例中，容器的寬度將為 50% 或 300 像素，取決於哪個值更小：
CSS
.container {
width: min(50%, 300px);
}
函式 max()
max() 函式接受多個值並返回其中的最大值。對於設置最小尺寸和確保響應式設計很有用。
函式 clamp()
clamp() 函式接受三個值：最小值、偏好值和最大值。限制值在最小和最大值之間，傾向於偏好值。
5.3 使用 CSS 函式的好處
使用 CSS 函式的好處：
- 靈活性。CSS 函式允許動態計算值，從而創建更靈活和回應式的樣式。
- 簡化回應式設計。
min()、max()和clamp()函式顯著簡化了回應式設計的創建，允許將值限制在特定範圍內。 - 減少媒體查詢的需求。使用這些函式可以減少為不同螢幕尺寸適應樣式所需的媒體查詢數量。
5.4 完整實現範例
CSS
.container {
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px;
}
.block {
background-color: #3498db;
color: white;
padding: 10px;
text-align: center;
}
.block:nth-child(1) {
width: calc(50% - 20px);
}
.block:nth-child(2) {
width: min(300px, 100%);
}
.block:nth-child(3) {
width: max(200px, 50%);
}
.text {
font-size: clamp(12px, 2vw, 24px);
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 函式使用範例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="block">塊的寬度為 calc(50% - 20px)</div>
<div class="block">塊的寬度為 min(300px, 100%)</div>
<div class="block">塊的寬度為 max(200px, 50%)</div>
<p class="text">文字字體大小為 clamp(12px, 2vw, 24px)</p>
</div>
</body>
</html>
GO TO FULL VERSION