CodeGym/Adesua ahorow/Frontend SELF TW/函式 min(), max() 和 clamp()

函式 min(), max() 和 clamp()

開放

7.1 函式 min()

min() 函式返回列表中最小的值。這在設置不超過某個限制的值時非常有用。

語法:

選擇器 {
  屬性: min(value1, value2 ...);
}

使用範例:

在這個例子中,區塊的寬度不會超過 300 像素,但如果父元素的 100% 小於 300 像素,則使用 100% 的值:

CSS
/* 區塊寬度不超過 300px,但不小於 100px */

.block {
  width: min(300px, 100%);
}

範例 2: 字體大小限制

在這個例子中,字體大小不會超過 2em,但如果檢視窗口寬度的 5% 更小,則使用這個值:

CSS
.text {
  font-size: min(2em, 5vw);
}

7.2 函式 max()

max() 函式返回列表中最大的值。這在設置不低於某個限制的值時非常有用。

語法:

選擇器 {
  屬性: max(value1, value2, ...);
}

使用範例

在這個例子中,區塊的寬度不會小於 200 像素,但如果父元素寬度的 50% 大於 200 像素,則使用 50% 的值:

CSS
/* 區塊寬度不小於 200px,但可以更大 */
.block {
  width: max(200px, 50%);
}

範例 2: 最小字體大小

在這個例子中,字體大小不會小於 1.5em,但如果檢視窗口寬度的 2% 更大,則使用這個值:

CSS
.title {
  font-size: max(1.5em, 2vw);
}

7.3 函式 clamp()

clamp() 函式返回一個被最小值和最大值限制的值。它接受三個參數:最小值、偏好的值和最大值。

語法:

選擇器 {
  屬性: clamp(min, 表達式, max);
}

使用範例

在這個例子中,字體大小會根據檢視窗口寬度改變:至少 12 像素,最多 24 像素,偏好的值是檢視窗口寬度的 2%:

CSS
/* 字體大小 12px 到 24px,根據螢幕寬度 */

.text {
  font-size: clamp(12px, 2vw, 24px);
}

範例 2: 區塊寬度限制

在這個例子中,區塊的寬度會根據父元素寬度改變,但不會小於 200 像素,也不會大於 600 像素:

CSS
.box {
  width: clamp(200px, 50%, 600px);
}

7.4 完整實現範例

CSS
.container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
}

.box {
  background-color: #3498db;
  color: white;
  padding: 10px;
  text-align: center;
  width: clamp(200px, 50%, 600px);
}

.text {
  font-size: clamp(1em, 2vw, 2em);
}

.sidebar {
  background-color: #2ecc71;
  color: white;
  padding: 10px;
  text-align: center;
  width: max(200px, 30%);
}

.text-small {
  font-size: min(2em, 5vw);
}
HTML
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>使用函式 min(), max() 和 clamp() 的範例</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="container">
      <div class="box">寬度: clamp(200px, 50%, 600px)</div>
      <p class="text">字體大小: clamp(1em, 2vw, 2em)</p>
      <div class="sidebar">寬度: max(200px, 30%)</div>
      <p class="text-small">字體大小: min(2em, 5vw)</p>
    </div>
  </body>
</html>
1
任務
Frontend SELF TW,  等級 32課堂 1
上鎖
使用 clamp() 設定寬度
使用 clamp() 設定寬度
1
任務
Frontend SELF TW,  等級 32課堂 1
上鎖
使用 clamp() 設置字體
使用 clamp() 設置字體
留言
  • 受歡迎
你必須登入才能留言
此頁面尚無留言