1. Web
  2. CSS
  3. CSS 值和單位
  4. 使用數學函式

使用 CSS 數學函式

CSS 數學函式允許將屬性值（例如元素的 height、animation-duration 或 font-size）寫成數學表示式。

在不使用任何數學函式的情況下，諸如 rem、vw 和 % 等內建的CSS 單位通常已經足夠靈活，可以為 HTML 元素設定樣式以實現特定的使用者體驗。

然而，在某些情況下，我們可能會覺得使用單一的值和單位來表達元素的樣式會受到限制。請思考以下示例：

  1. 我們希望將內容區域的高度設定為“視口高度減去導航欄高度”。
  2. 我們希望將兩個元素的寬度相加，以定義第三個元素的寬度。
  3. 我們希望防止某些文字的可變 font-size 增長超過特定大小。

在所有這些情況下，我們都需要依靠數學來達到預期的結果。一種解決方案是依賴 JavaScript 定義的數學函式，並根據指令碼計算的結果動態設定元素樣式。

在許多情況下，包括上述示例，我們可以轉而使用直接內置於 CSS 中的數學函式。與使用 JavaScript 相比，這種解決方案通常實現起來更簡單，瀏覽器執行速度也更快。

總的來說，開發者可以在其樣式表中使用近二十種 CSS 數學函式的組合。在本指南中，我們將舉例說明四種較常用的函式，並介紹那些更高階的函式。

calc()：基本數學運算

在我們上面三個示例的前兩個中，我們希望根據加法或減法運算的結果來設定元素的樣式。這正是 calc() 的用例之一。

calc() 函式允許你使用加法、減法、乘法和除法來指定 CSS 屬性值。它通常用於組合兩個具有不同單位的 CSS 值，例如 % 和 px。

calc() 數學函式接受一個數學表示式作為引數，並返回該表示式的結果，例如：

css
property: calc(expression);

calc() 示例

點選下面的播放圖示，在程式碼演練場中檢視 calc() 示例並親自嘗試。

css
div {
  background-color: black;
  margin: 4px 0;
  width: 100%;
}

div > code {
  display: block;
  background-color: red;
  color: white;
  height: 48px;
}

.calc1 > code {
  /* Output width: `110px` */
  width: calc(10px + 100px);
}

.calc2 > code {
  /* Output width: `10em` */
  width: calc(2em * 5);
}

.calc3 > code {
  /* Output width: Depends on the container's width */
  width: calc(100% - 32px);
}

.calc4 > code {
  --predefined-width: 100%;
  /* Output width: Depends on the container's width */
  width: calc(var(--predefined-width) - calc(16px * 2));
}

min()：在一組值中找出最小值

在某些情況下，我們不希望 CSS 屬性的值超過某個數字。舉個例子，我們希望內容容器的寬度是“螢幕全寬”和“500 畫素”中較小的一個。在這些情況下，我們可以使用 CSS 數學函式 min()。

min() 數學函式接受一組逗號分隔的值作為引數，並返回這些值中最小的一個，例如：

css
width: min(32px, 50%, 2rem);

此函式通常用於比較兩個具有不同單位的 CSS 值，例如 % 和 px。

min() 示例

點選下面的播放圖示，在程式碼演練場中檢視 min() 示例並親自嘗試。

css
div {
  background-color: black;
  margin: 4px 0;
  width: 100%;
}

div > code {
  display: block;
  background-color: darkblue;
  color: white;
  height: 48px;
}

.min1 > code {
  /* Output width: Depends on the container's width; */
  /* on this page, likely to be `50%` of the container's width */
  width: min(9999px, 50%);
}

.min2 > code {
  /* Output width: Depends on the container's width; */
  /* on this page, likely to be `100%` of the container's width */
  width: min(9999px, 100%);
}

.min3 > code {
  /* Output width: Depends on the container's width; */
  /* on this page, likely to be `120px` of the container's width */
  width: min(120px, 150px, 90%);
}

.min4 > code {
  /* Output width: Depends on the container's width; */
  /* on this page, likely to be `80px` of the container's width */
  width: min(80px, 90%);
}

max()：在一組值中找出最大值

與 min() 類似，有時我們不希望 CSS 屬性的值低於某個數字。例如，我們可能希望內容容器的寬度是“螢幕全寬”和“500 畫素”中較大的一個。在這些情況下，我們可以使用 CSS 數學函式 max()。

max() 數學函式接受一組逗號分隔的值作為引數，並返回這些值中最大的一個，例如：

css
width: max(32px, 50%, 2rem);

此函式通常用於比較兩個具有不同單位的 CSS 值，例如 % 和 px。

請注意 min() 和 max() 示例之間的異同。

max() 示例

點選下面的播放圖示，在程式碼演練場中檢視 max() 示例並親自嘗試。

css
div {
  background-color: black;
  margin: 4px 0;
  width: 100%;
  height: 48px;
}

div > code {
  display: block;
  background-color: darkmagenta;
  color: white;
  height: 48px;
}

.max1 > code {
  /* Output width: Depends on the container's width; */
  /* on this page, likely to be `50%` of the container's width */
  width: max(50px, 50%);
}

.max2 > code {
  /* Output width: Depends on the container's width; */
  /* on this page, likely to be `100%` of the container's width */
  width: max(50px, 100%);
}

.max3 > code {
  /* Output width: Depends on the container's width; */
  /* on this page, likely to be `90%` of the container's width */
  width: max(20px, 50px, 90%);
}

.max4 > code {
  /* Output width: Depends on the container's width; */
  /* on this page, likely to be `80%` of the container's width */
  width: max(80px, 80%);
}

clamp()：將一個值限制在兩個值之間

我們可以透過使用 clamp() 來結合 min() 和 max() 的功能。clamp() 數學函式接受一個最小值、一個要限制的值和一個最大值作為引數，例如：

css
/* clamped value: 50%, minimum: 100px, maximum: 300px */
width: clamp(100px, 50%, 300px);
  • 如果要限制的值小於傳入的最小值，函式將返回最小值。
  • 如果要限制的值大於傳入的最大值，函式將返回最大值。
  • 如果要限制的值介於傳入的最小值和最大值之間，函式將返回原始的要限制的值。

此函式通常用於比較兩個具有不同單位的 CSS 值，例如 % 和 px。

clamp() 示例

點選下面的播放圖示，在程式碼演練場中檢視 clamp() 示例並親自嘗試。

css
div {
  background-color: black;
  margin: 4px 0;
  width: 100%;
  height: 48px;
}

div > code {
  display: block;
  background-color: darkgreen;
  color: white;
  height: 48px;
}

.clamp1 > code {
  /* Output width: Depends on the container's width; */
  /* on this page, likely to be `20%` of the container's width */
  width: clamp(20%, 1px, 80%);
}

.clamp2 > code {
  /* Output width: Depends on the container's width; */
  /* on this page, likely to be `90%` of the container's width */
  width: clamp(10%, 9999px, 90%);
}

.clamp3 > code {
  /* Output width: `125px` */
  width: clamp(125px, 1px, 250px);
}

.clamp4 > code {
  /* Output width: `150px` */
  width: clamp(25px, 9999px, 150px);
}

高階 CSS 數學函式

在佈局和設計 DOM 元素樣式時，四個基本的數學函式 calc()、min()、max() 和 clamp() 通常就足夠了。然而，對於高階用途，如數學學習材料、3D 視覺化或 CSS 動畫，你可以考慮使用：

  • 階梯值函式
    • round()：根據指定的取整策略計算一個值
    • mod()：計算除法運算的餘數，其符號與除數相同
    • rem()：計算除法運算的餘數，其符號與被除數相同
  • 三角函式
    • sin()：計算一個數的三角正弦值
    • cos()：計算一個數的三角餘弦值
    • tan()：計算一個數的三角正切值
    • asin()：計算一個數的三角反正弦值
    • acos()：計算一個數的三角反餘弦值
    • atan()：計算一個數的三角反正切值
    • atan2()：根據給定的兩個數計算三角反正切值
  • 指數函式
    • pow()：計算一個數的指定次冪
    • sqrt()：計算一個數的平方根
    • hypot()：計算給定數值平方和的平方根
    • log()：計算一個數的對數（預設底數為 e）
    • exp()：計算 e 的指定次冪
  • 符號函式
    • abs()：計算一個數的絕對值
    • sign()：計算一個數的符號（正、負或零）

總結

  • 你可以使用 CSS 數學函式來建立響應式使用者介面，而無需編寫任何 JavaScript 程式碼。
  • CSS 數學函式有時可以替代 CSS 媒體查詢來定義佈局斷點。
  • 在 2023 年，Interop 專案的成員將“CSS 數學函式”選為一個重點改進領域。這意味著瀏覽器供應商正在共同努力，以確保 CSS 數學函式在不同瀏覽器和裝置上表現一致。

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ，由 MDN 貢獻者完成。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.