使用 CSS 數學函式

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

在不使用任何數學的情況下，內建的 CSS 單位（如 rem、vw 和 %）通常足夠靈活，可以為 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
property: min(<first value>, <second value>, <third value>, ...);

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

min() 示例

單擊下面的播放圖示，在程式碼 playground 中檢視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
property: max(<first value>, <second value>, <third value>, ...);

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

請注意min()和max()示例之間的相似之處和差異。

max() 示例

單擊下面的播放圖示，在程式碼 playground 中檢視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
property: clamp(<minimum value>, <value to be clamped>, <maximum value>);
  • 如果要夾緊的值小於傳遞的最小值，則函式將返回最小值。
  • 如果要夾緊的值大於傳遞的最大值，則函式將返回最大值。
  • 如果要夾緊的值介於傳遞的最小值和最大值之間，則函式將返回要夾緊的原始值。

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

clamp() 示例

單擊下面的播放圖示，在程式碼 playground 中檢視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 數學函式在所有瀏覽器和裝置上的執行結果相同。