現代 CSS 解決方案:CSS 數學函數

来源:https://www.cnblogs.com/coco1s/archive/2022/05/11/16256948.html
-Advertisement-
Play Games

在 CSS 中,其實存在各種各樣的函數。具體分為: Transform functions Math functions Filter functions Color functions Image functions Counter functions Font functions Shape f ...


在 CSS 中,其實存在各種各樣的函數。具體分為:

本文,將具體介紹其中的 CSS 數學函數(Math functions)中,已經被瀏覽器大規模支持的 4 個:

  • calc()
  • min()
  • max()
  • clamp()

為什麼說是被瀏覽器大規模支持的?因為除了這 4 個目前已經得到大規模支持的數學函數外,其實規範 CSS Values and Units Module Level 4 已經定義了諸如三角函數相關 sin()cos()tan() 等,指數函數相關 pow()sqrt() 等等數學函數,只是目前都處於實驗室階段,還沒有瀏覽器支持它們,需要給時間一點時間。

Calc()

calc() 此 CSS 函數允許在聲明 CSS 屬性值時執行一些計算。

語法類似於

{
    width: calc(100% - 80px);
}

一些需要註意的點:

  • +- 運算符的兩邊必須要有空白字元。比如,calc(50% -8px) 會被解析成為一個無效的表達式,必須寫成calc(8px + -50%)
  • */ 這兩個運算符前後不需要空白字元,但如果考慮到統一性,仍然推薦加上空白符
  • 用 0 作除數會使 HTML 解析器拋出異常
  • 涉及自動佈局和固定佈局的表格中的表列、表列組、表行、表行組和表單元格的寬度和高度百分比的數學表達式,auto 可視為已指定。
  • calc() 函數支持嵌套,但支持的方式是:把被嵌套的 calc() 函數全當成普通的括弧。(所以,函數內直接用括弧就好了。)
  • calc() 支持與 CSS 變數混合使用

看一個最常見的例子,頁面結構如下:

<div class="g-container">
    <div class="g-content">Content</div>
    <div class="g-footer">Footer</div>
</div>

頁面的 g-footer 高為 80px,我們希望不管頁面多長,g-content 部分都可以占滿剩餘空間,像是這樣:

這種佈局使用 flex 的彈性佈局可以輕鬆實現,當然,也可以使用 calc() 實現:

.g-container {
    height: 100vh;
}
.g-content {
    height: calc(100vh - 80px);
}
.g-footer {
    height: 80px;
}

下麵羅列一些 Calc() 的進階技巧。

Calc 中的加減法與乘除法的差異

註意,calc() 中的加減法與乘除法的差異:

{
    font-size: calc(1rem + 10px);
    width: calc(100px + 10%);
}

可以看到,加減法兩邊的操作數都是需要單位的,而乘除法,需要一個無單位數,僅僅表示一個倍率:

{
    width: calc(100% / 7);
    animation-delay: calc(1s * 3);
}

Calc 的嵌套

calc() 函數是可以嵌套使用的,像是這樣:

{
  width: calc(100vw - calc(100% - 64px));
}

此時,內部的 calc() 函數可以退化寫成一個括弧即可 (),所以上述代碼等價於:

{
  width: calc(100vw - (100% - 64px));
}

也就是嵌套內的 calc(),calc 幾個函數字元可以省略

Calc 內不同單位的混合運算

calc() 支持不同單位的混合運算,對於長度,只要是屬於長度相關的單位都可以進行混合運算,包含這些:

  • px
  • %
  • em
  • rem
  • in
  • mm
  • cm
  • pt
  • pc
  • ex
  • ch
  • vh
  • vw
  • vmin
  • vmax

這裡有一個有意思的點,運算肯定是消耗性能的,早年間,有這樣一段 CSS 代碼,可以直接讓 Chrome 瀏覽器崩潰 Crash:

<div></div>

CSS 樣式如下:

div {
  --initial-level-0: calc(1vh + 1% + 1px + 1em + 1vw + 1cm);

  --level-1: calc(var(--initial-level-0) + var(--initial-level-0));
  --level-2: calc(var(--level-1) + var(--level-1));
  --level-3: calc(var(--level-2) + var(--level-2));
  --level-4: calc(var(--level-3) + var(--level-3));
  --level-5: calc(var(--level-4) + var(--level-4));
  --level-6: calc(var(--level-5) + var(--level-5));
  --level-7: calc(var(--level-6) + var(--level-6));
  --level-8: calc(var(--level-7) + var(--level-7));
  --level-9: calc(var(--level-8) + var(--level-8));
  --level-10: calc(var(--level-9) + var(--level-9));
  --level-11: calc(var(--level-10) + var(--level-10));
  --level-12: calc(var(--level-11) + var(--level-11));
  --level-13: calc(var(--level-12) + var(--level-12));
  --level-14: calc(var(--level-13) + var(--level-13));
  --level-15: calc(var(--level-14) + var(--level-14));
  --level-16: calc(var(--level-15) + var(--level-15));
  --level-17: calc(var(--level-16) + var(--level-16));
  --level-18: calc(var(--level-17) + var(--level-17));
  --level-19: calc(var(--level-18) + var(--level-18));
  --level-20: calc(var(--level-19) + var(--level-19));
  --level-21: calc(var(--level-20) + var(--level-20));
  --level-22: calc(var(--level-21) + var(--level-21));
  --level-23: calc(var(--level-22) + var(--level-22));
  --level-24: calc(var(--level-23) + var(--level-23));
  --level-25: calc(var(--level-24) + var(--level-24));
  --level-26: calc(var(--level-25) + var(--level-25));
  --level-27: calc(var(--level-26) + var(--level-26));
  --level-28: calc(var(--level-27) + var(--level-27));
  --level-29: calc(var(--level-28) + var(--level-28));
  --level-30: calc(var(--level-29) + var(--level-29));

  --level-final: calc(var(--level-30) + 1px);

    border-width: var(--level-final);                                 
    border-style: solid;
}

可以看到,從 --level-1 --level-30,每次的運算量都是成倍的增長,最終到 --level-final 變數,展開將有 2^30 = 1073741824--initial-level-0 表達式的內容。

並且,每個 --initial-level-0 表達式的內容 -- calc(1vh + 1% + 1px + 1em + 1vw + 1cm),在瀏覽器解析的時候,也已經足夠複雜。

混合在一起,就導致了瀏覽器的 BOOM(Chrome 70之前的版本),為了能看到效果,我們將上述樣式賦給某個元素被 hover 的時候,得到如下效果:

css-crash

當然,這個 BUG 目前已經被修複了,我們也可以通過這個小 DEMO 瞭解到,一是 calc 是可以進行不同單位的混合運算的,另外一個就是註意具體使用的時候如果計算量巨大,可能會導致性能上較大的消耗。

當然,不要將長度單位和非長度單位混合使用,像是這樣:

{
    animation-delay: calc(1s + 1px);
}

Calc 搭配 CSS 自定義變數使用

calc() 函數非常重要的一個特性就是能夠搭配 CSS 自定義以及 CSS @property 變數一起使用。

最簡單的一個 DEMO:

:root {
    --width: 10px;
}
div {
    width: calc(var(--width));
}

當然,這樣看上去,根本看不出這樣的寫法的作用,好像沒有什麼意義。實際應用場景中,會比上述的 DEMO 要稍微複雜一些。

假設我們要實現這樣一個 loading 動畫效果,一開始只有 3 個球:

可能的寫法是這樣,我們給 3 個球都添加同一個旋轉動畫,然後分別控制他們的 animation-delay

<div class="g-container">
    <div class="g-item"></div>
    <div class="g-item"></div>
    <div class="g-item"></div>
</div>
.item:nth-child(1) {
    animation: rotate 3s infinite linear;
}
.item:nth-child(2) {
    animation: rotate 3s infinite -1s linear;
}
.item:nth-child(3) {
    animation: rotate 3s infinite -2s linear;
}

如果有一天,這個動畫需要擴展成 5 個球的話,像是這樣:

我們就不得已,得去既添加 HTML,又修改 CSS。而如果藉助 Calc 和 CSS 變數,這個場景就可以稍微簡化一下。

假設只有 3 個球:

<div class="g-container">
    <div class="g-item" style="--delay: 0"></div>
    <div class="g-item" style="--delay: 1"></div>
    <div class="g-item" style="--delay: 2"></div>
</div>

我們通過 HTML 的 Style 標簽,傳入 --delay 變數,在 CSS 中直接使用它們:

.g-item {
    animation: rotate 3s infinite linear;
    animation-delay: calc(var(--delay) * -1s);
}
@keyframes rotate {
    to {
        transform: rotate(360deg);
    }
}

而當動畫修改成 5 個球時,我們就不需要修改 CSS,直接修改 HTML 即可,像是這樣:

<div class="g-container">
    <div class="g-item" style="--delay: 0"></div>
    <div class="g-item" style="--delay: 0.6"></div>
    <div class="g-item" style="--delay: 1.2"></div>
    <div class="g-item" style="--delay: 1.8"></div>
    <div class="g-item" style="--delay: 2.4"></div>
</div>

核心的 CSS 還是這一句,不需要做任何修改:

{
    animation-delay: calc(var(--delay) * -1s);
}

完整的 DEMO,你可以戳這裡:CodePen Demo -- Calc & CSS Variable Demo

calc 搭配自定義變數時候的預設值

還是上述的 Loading 動畫效果,如果我的 HTML 標簽中,有一個標簽忘記填充 --delay 的值了,那會發生什麼?

像是這樣:

<div class="g-container">
    <div class="g-item" style="--delay: 0"></div>
    <div class="g-item" style="--delay: 0.6"></div>
    <div class="g-item"></div>
    <div class="g-item" style="--delay: 1.8"></div>
    <div class="g-item" style="--delay: 2.4"></div>
</div>
{
    animation-delay: calc(var(--delay) * -1s);
}

由於 HTML 標簽沒有傳入 --delay 的值,並且在 CSS 中向上查找也沒找到對應的值,此時,animation-delay: calc(var(--delay) * -1s) 這一句其實是無效的,相當於 animation-delay: 0,效果也就是少了個球的效果:

所以,基於這種情況,可以利用 CSS 自定義變數 var() 的 fallback 機制:

{
    // (--delay, 1) 中的 1 是個容錯機制
    animation-delay: calc(var(--delay, 1) * -1s);
}

此時,如果沒有讀取到任何 --delay 值,就會使用預設的 1 與 -1s 進行運算。

Calc 字元串拼接

很多人在使用 CSS 的時候,會嘗試字元串的拼接,像是這樣:

<div style="--url: 'bsBD1I.png'"></div>
:root {
    --urlA: 'url(https://s1.ax1x.com/2022/03/07/';
    --urlB: ')';
}
div {
    width: 400px;
    height: 400px;
    background-image: calc(var(--urlA) + var(--url) + var(--urlB));
}

這裡想利用 calc(var(--urlA) + var(--url) + var(--urlB)) 拼出完整的在 background-image 中可使用的 URL url(https://s1.ax1x.com/2022/03/07/bsBD1I.png)

然而,這是不被允許的(無法實現的)。calc 的沒有字元串拼接的能力

唯一可能完成字元串拼接的是在元素的偽元素的 content 屬性中。但是也不是利用 calc。

來看這樣一個例子,這是錯誤的:

:root {
    --stringA: '123';
    --stringB: '456';
    --stringC: '789';
}

div::before {
    content: calc(var(--stringA) + var(--stringB) + var(--stringC));
}

此時,不需要 calc,直接使用自定義變數相加即可。

因此,正確的寫法:

:root {
    --stringA: '123';
    --stringB: '456';
    --stringC: '789';
}
div::before {
    content: var(--stringA) + var(--stringB) + var(--stringC);
}

此時,內容可以正常展示:

再強調一下,calc 的沒有字元串拼接的能力,如下的使用方式都是無法被識別的錯誤語法:

.el::before {
  // 不支持字元串拼接
  content: calc("My " + "counter");
}
.el::before {
  // 更不支持字元串乘法
  content: calc("String Repeat 3 times" * 3);
}

min()、max()、clamp()

min()、max()、clamp() 適合放在一起講。它們的作用彼此之間有所關聯。

  • max():從一個逗號分隔的表達式列表中選擇最大(正方向)的值作為屬性的值
  • min():從一個逗號分隔的表達式列表中選擇最小的值作為屬性的值
  • clamp():把一個值限制在一個上限和下限之間,當這個值超過最小值和最大值的範圍時,在最小值和最大值之間選擇一個值使用

由於在現實中,有非常多元素的的屬性不是一成不變的,而是會根據上下文、環境的變化而變化。

譬如這樣一個佈局:

<div class="container"></div>
.container {
    height: 100px;
    background: #000;
}

效果如下,.container 塊它會隨著屏幕的增大而增大,始終占據整個屏幕:

對於一個響應式的項目,我們肯定不希望它的寬度會一直變大,而是當達到一定的閾值時,寬度從相對單位變成了絕對單位,這種情況就適用於 min(),簡單改造下代碼:

.container {
    width: min(100%, 500px);
    height: 100px;
    background: #000;
}

容器的寬度值會在 width: 100%width: 500px 之間做選擇,選取相對小的那個。

在屏幕寬度不足 500px 時候,也就表現為 width: 100%,反之,則表現為 width: 500px

同理,在類似的場景,我們也可以使用 max() 從多個值中,選取相對更大的值。

min()、max() 支持多個值的列表

min()、max() 支持多個值的列表,譬如 width: max(1px, 2px, 3px, 50px)

當然,對於上述表達:

width: max(1px, 2px, 3px, 50px) 其實等於 width: 50px。因此,對於 min()、max() 的具體使用而言,最多應該只包含一個具體的絕對單位。否則,這樣的像上述這種代碼,雖然語法支持,但是任何情況下,計算值都是確定的,其實沒有意義。

配合 calc

min()、max()、clamp() 都可以配合 calc 一起使用。

譬如:

div {
    width: max(50vw, calc(300px + 10%));
}

在這種情況下,calc 和相應包裹的括弧可以省略,因此,上述代碼又可以寫成:

div {
    width: max(50vw, 300px + 10%);
}

基於 max、min 模擬 clamp

現在,有這樣一種場景,如果,我們又需要限制最大值,也需要限制最小值,怎麼辦呢?

像是這樣一個場景,**字體的大小,最小是 12px,隨著屏幕的變大,逐漸變大,但是為了避免老人機現象(隨著屏幕變大,無限制變大),我們還需要限制一個最大值 20px。

我們可以利用 vw 來實現給字體賦動態值,假設在移動端,設備寬度的 CSS 像素為 320px 時,頁面的字體寬度最小為 12px,換算成 vw 即是 320 / 100 = 3.2,也就是 1vw 在 屏幕寬度為 320px 時候,表現為 3.2px,12px 約等於 3.75 vw。

同時,我們需要限制最大字體值為 20px,對應的 CSS 如下:

p {
    font-size: max(12px, min(3.75vw, 20px));
}

看看效果:

通過 max()min() 的配合使用,以及搭配一個相對單位 vw,我們成功的給字體設置了上下限,而在這個上下限之間實現了動態變化。

當然,上面核心的這一段 max(12px, min(3.75vw, 20px)) 看上去有點繞,因此,CSS 推出了 clamp() 簡化這個語法,下麵兩個寫法是等價的:

p {
    font-size: max(12px, min(3.75vw, 20px));
    // 等價於
    font-size: clamp(12px, 3.75vw, 20px);
}

clamp()

clamp() 函數的作用是把一個值限制在一個上限和下限之間,當這個值超過最小值和最大值的範圍時,在最小值和最大值之間選擇一個值使用。它接收三個參數:最小值、首選值、最大值。

有意思的是,clamp(MIN, VAL, MAX) 其實就是表示 max(MIN, min(VAL, MAX))

使用 vw 配合 clamp 實現響應式佈局

我們繼續上面的話題。

在不久的過去,移動端的適配方面,使用更多的 rem 適配方案,可能會藉助一些現成的庫,類似於 flexible.js、hotcss.js 等庫。rem 方案比較大的一個問題在於需要一段 JavaScript 響應視口變化,重設根元素的 font-size,並且,使用 rem 多少有點 hack 的感覺。

在現在,在移動端適配,我們更為推崇的是 vw 純 CSS 方案,與 rem 方案類似,它的本質也是頁面的等比例縮放。它的一個問題在於,如果僅僅使用 vw,隨著屏幕的不斷變大或者縮小,內容元素將會一直變大變小下去,這也導致了在大屏幕下,許多元素看著實在太大了!

因此,我們需要一種能夠控制最大、最小閾值的方式,像是這樣:

此時,clamp 就能非常好的派上用場,還是我們上述的例子,這一段代碼 font-size: clamp(12px, 3.75vw, 20px),就能將字體限制在 12px - 20px 的範圍內。

因此,對於移動端頁面而言,所有涉及長度的單位,我們都可以使用 vw 進行設置。而諸如字體、內外邊距、寬度等不應該完全等比例縮放的,採用 clamp() 控制最大最小閾值

Modern Fluid Typography Using CSS Clamp 一文中,對使用 clamp() 進行流式響應式佈局還有更為深入的探討,感興趣的可以深入閱讀。

總結一下,對於移動端頁面,我們可以以 vw 配合 clamp() 的方式,​完成整個移動端佈局的適配。它的優勢在於:

  • 沒有額外 JavaScript 代碼的引入,純 CSS 解決方案
  • 能夠很好地控制邊界閾值,合理的進行縮放展示

反向響應式變化

還有一個技巧,利用 clamp() 配合負值,我們也可以反向操作,得到一種屏幕越大,字體越小的反向響應式效果:

p {
    font-size: clamp(20px, -5vw + 96px, 60px);
}

看看效果:

這個技巧挺有意思的,由於 -5vw + 96px 的計算值會隨著屏幕的變小而增大,實現了一種反向的字體響應式變化。

總結

總結一下,合理運用 min()、max()、clamp(),是構建現代響應式佈局的重點,我們可以告別傳統的需要 JavaScript 輔助的一些方案,基於 CSS 這些數學函數即可完成所有的訴求。

一些進階閱讀非常好的文章:

最後

好了,本文到此結束,希望本文對你有所幫助

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 本文和接下來的幾篇文章為閱讀郭霖先生所著《第一行代碼:Android(篇第2版)》的學習筆記,按照書中的內容順序進行記錄,書中的Demo本人全部都做過了。 每一章節本人都做了詳細的記錄,以下是我學習記錄(包含大量書中內容的整理和自己在學習中遇到的各種bug及解決方案),方便以後閱讀和查閱。最後,感激 ...
  • 本文和接下來的幾篇文章為閱讀郭霖先生所著《第一行代碼:Android(篇第2版)》的學習筆記,按照書中的內容順序進行記錄,書中的Demo本人全部都做過了。 每一章節本人都做了詳細的記錄,以下是我學習記錄(包含大量書中內容的整理和自己在學習中遇到的各種bug及解決方案),方便以後閱讀和查閱。最後,感激 ...
  • 本文和接下來的幾篇文章為閱讀郭霖先生所著《第一行代碼:Android(篇第2版)》的學習筆記,按照書中的內容順序進行記錄,書中的Demo本人全部都做過了。 每一章節本人都做了詳細的記錄,以下是我學習記錄(包含大量書中內容的整理和自己在學習中遇到的各種bug及解決方案),方便以後閱讀和查閱。最後,感激 ...
  • 信息爆發時代,有效率有質量地整理視頻、音頻、文字等信息變得尤為重要。會議、講座、採訪、客服電話等場景均需要形成完整的文字記錄材料,音視頻文件也要配有字幕。語音轉文字的智能化,讓信息錄入即時高效。 在直播類、會議類、筆記類的應用中都具備實時語音轉寫功能。例如,在音視頻會議中,可以將發言內容可視化,即時 ...
  • 本期 OpenAtom OpenHarmony(以下簡稱“OpenHarmony”)開發者故事,我們特別採訪了 2 月代碼最佳貢獻者、一位接觸 OpenHarmony 1 年左右,2022 年初便完成高難度開發項目的開發者——潤和軟體資深軟體開發工程師趙海鵬。 ...
  • 前言 【內容】 jQuery菜鳥編程學習筆記 具體詳情看目錄 【目的】 記錄本人在jQuery學習中的筆記 方便日後的工作與學習。 【學習資料】 jQuery教程-菜鳥教程 【溫馨提示】 筆記中有些個人理解後整理的筆記,可能有所偏差,也懇請讀者幫忙指出,謝謝。 jQuery快速瞭解 啥是jQuery ...
  • 至此基本上vue2.0的內容全部結束,後面還有點elementUI和vue3.0的內容過幾天再來更新。 這幾天要回學校去參加畢業答辯,斷更幾天 一.相關理解 是vue的一個插件庫,專門用來實現spa(單頁面應用)的,也就是一直都是一個index.html頁面,他有他的導航區和展示區,雖然只有一個頁面 ...
  • markRaw 作用:標記一個對象,使其永遠不會再成為響應式對象 應用場景: 1.有些值不應被設置成響應式時,例如複雜的第三方類庫等 2.當渲染具有不可變數據源的大列表時,跳過響應式轉換可以提高性能 3.在動態渲染組件的時候我們就可以使用 markRaw 包裹。 markRaw 的使用場景 很多時候 ...
一周排行
    -Advertisement-
    Play Games
  • 分組和樹形結構是不一樣的。 樹形結構是以遞歸形式存在。分組是以鍵值對存在的形式,類似於GroupBy這樣的形式。 舉個例子 ID NAME SEX Class 1 張三 男 1 2 李四 女 2 3 王二 男 1 當以Sex為分組依據時則是 Key Value 男 1 張三 男 1 3 王二 男 1 ...
  • NetCore中將SQLServer資料庫備份為Sql腳本 描述: 最近寫項目收到了一個需求, 就是將SQL Server資料庫備份為Sql腳本, 如果是My Sql之類的還好說, 但是在網上搜了一大堆, 全是教你怎麼操作SSMS的, 就很d疼! 解決方案: 通過各種查找資料, 還有一些老哥的幫助, ...
  • 我的Notion Clowd.Squirrel Squirrel.Windows 是一組工具和適用於.Net的庫,用於管理 Desktop Windows 應用程式的安裝和更新。 Squirrel.Windows 對 Windows 應用程式的實現語言沒有任何要求,甚至無需服務端即可完成增量更新。 ...
  • 轉載請註明來源 https://www.cnblogs.com/brucejiao/p/16188865.html 謝謝! 轉載請註明來源 https://www.cnblogs.com/brucejiao/p/16188865.html 謝謝! 轉載請註明來源 https://www.cnblog ...
  • 1. Netty源碼研究筆記(3)——Channel系列 依舊是通過先縱向再橫向的研究方法,在開篇中,我們發現不管是Sever還是Client,最終的啟動是通過調用channel的對應方法來完成的,而這個動作實際在channel綁定的eventLoop中執行。 接下來,我們繼續EchoSever、E ...
  • 大家好,今天給大家介紹一款輕量、快速、穩定可編排的組件式規則引擎框架LiteFlow。 一、LiteFlow的介紹 LiteFlow官方網站和代碼倉庫地址 官方網站:https://yomahub.com/liteflow Gitee托管倉庫:https://gitee.com/dromara/li ...
  • 我使用Spring AOP實現了用戶操作日誌功能 今天答辯完了,復盤了一下系統,發現還是有一些東西值得拿出來和大家分享一下。 需求分析 系統需要對用戶的操作進行記錄,方便未來溯源 首先想到的就是在每個方法中,去實現記錄的邏輯,但是這樣做肯定是不現實的,首先工作量大,其次違背了軟體工程設計原則(開閉原 ...
  • 《零基礎學Java》 繪製幾何圖形 Java可以分別使用 Graphics 和 Graphics2D 繪製圖形,Graphics類 使用不同的方法繪製不同的圖形(drawLine()方法可f以繪製線、drawRect()方法用於繪製矩形、drawOval()方法用於繪製橢圓形)。 Graphics類 ...
  • 本期教程人臉識別第三方平臺為虹軟科技,本文章講解的是人臉識別RGB活體追蹤技術,免費的功能很多可以自行搭配,希望在你看完本章課程有所收穫。 ...
  • 很多人都喜歡使用黑色的主題樣式,包括我自己,使用了差不多三年的黑色主題,但是個人覺得在進行視窗轉換的時候很廢眼睛。 比如IDEA是全黑的,然後需要看PDF或者WORD又變成白色的了,這樣來回切換導致眼睛很累,畢竟現在網頁以及大部分軟體的界面都是白色的。那麼還是老老實實的使用原來比較順眼的模式吧。 1 ...