現代 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篇》學習筆記（八）
    本文和接下來的幾篇文章為閱讀郭霖先生所著《第一行代碼：Android（篇第2版）》的學習筆記，按照書中的內容順序進行記錄，書中的Demo本人全部都做過了。 每一章節本人都做了詳細的記錄，以下是我學習記錄（包含大量書中內容的整理和自己在學習中遇到的各種bug及解決方案），方便以後閱讀和查閱。最後，感激 ...
  • 《第一行代碼：Android篇》學習筆記（七）
    本文和接下來的幾篇文章為閱讀郭霖先生所著《第一行代碼：Android（篇第2版）》的學習筆記，按照書中的內容順序進行記錄，書中的Demo本人全部都做過了。 每一章節本人都做了詳細的記錄，以下是我學習記錄（包含大量書中內容的整理和自己在學習中遇到的各種bug及解決方案），方便以後閱讀和查閱。最後，感激 ...
  • 《第一行代碼：Android篇》學習筆記（六）
    本文和接下來的幾篇文章為閱讀郭霖先生所著《第一行代碼：Android（篇第2版）》的學習筆記，按照書中的內容順序進行記錄，書中的Demo本人全部都做過了。 每一章節本人都做了詳細的記錄，以下是我學習記錄（包含大量書中內容的整理和自己在學習中遇到的各種bug及解決方案），方便以後閱讀和查閱。最後，感激 ...
  • iOS Widget
    信息爆發時代，有效率有質量地整理視頻、音頻、文字等信息變得尤為重要。會議、講座、採訪、客服電話等場景均需要形成完整的文字記錄材料，音視頻文件也要配有字幕。語音轉文字的智能化，讓信息錄入即時高效。 在直播類、會議類、筆記類的應用中都具備實時語音轉寫功能。例如，在音視頻會議中，可以將發言內容可視化，即時 ...
  • 趙海鵬：如何進行 OpenHarmony 音頻特性架構設計和開發工作
    本期 OpenAtom OpenHarmony（以下簡稱“OpenHarmony”）開發者故事，我們特別採訪了 2 月代碼最佳貢獻者、一位接觸 OpenHarmony 1 年左右，2022 年初便完成高難度開發項目的開發者——潤和軟體資深軟體開發工程師趙海鵬。 ...
  • 【筆記】【JavaScript】【jQuery】菜鳥編程學習筆記
    前言 【內容】 jQuery菜鳥編程學習筆記 具體詳情看目錄 【目的】 記錄本人在jQuery學習中的筆記 方便日後的工作與學習。 【學習資料】 jQuery教程-菜鳥教程 【溫馨提示】 筆記中有些個人理解後整理的筆記，可能有所偏差，也懇請讀者幫忙指出，謝謝。 jQuery快速瞭解 啥是jQuery ...
  • vue - Vue路由
    至此基本上vue2.0的內容全部結束，後面還有點elementUI和vue3.0的內容過幾天再來更新。 這幾天要回學校去參加畢業答辯，斷更幾天 一.相關理解 是vue的一個插件庫，專門用來實現spa（單頁面應用）的，也就是一直都是一個index.html頁面，他有他的導航區和展示區，雖然只有一個頁面 ...
  • vue3中markRaw的使用
    markRaw 作用:標記一個對象,使其永遠不會再成為響應式對象 應用場景: 1.有些值不應被設置成響應式時,例如複雜的第三方類庫等 2.當渲染具有不可變數據源的大列表時,跳過響應式轉換可以提高性能 3.在動態渲染組件的時候我們就可以使用 markRaw 包裹。 markRaw 的使用場景 很多時候 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類