鴻蒙OS 4.0公測機型公布：甚至連nova6都支持
華為全新的HarmonyOS 4.0操作系統將于今天下午正式登場，官方在發布會之前也已經正式給出了可升級的機型產品，這意味著這些機型會率先支持升級享用。這次的HarmonyOS 4.0支持
CSS 數學函數允許在 CSS 屬性值中執行數學表達式。CSS 數學函數僅支持加法（+）、減法（-）、乘法（*）、除法（/）。目前在 CSS 中有四個得到很好支持的數學函數：
這些 CSS 函數可能會以意想不到的方式使用，例如在漸變和顏色函數中以及與 CSS 自定義屬性結合使用。下面就來看看這 4 個 CSS 函數！
calc() 函數有助于在 CSS 屬性值中執行計算。它可以用在如下屬性中：length、frequency、angle、time、percentage、number、integer。
width: calc(100% - 80px);calc() 函數用一個表達式作為它的參數，用這個表達式的結果作為值。這個表達式可以是任何如下操作符的組合（+、-、*、/），采用標準操作符處理法則的簡單表達式。表達式中的運算對象可以使用任意長度的值。如果你愿意，甚至可以在一個表達式中混用這類值的不同單位。在需要時，還可以使用小括號來建立計算順序。
該函數具有廣泛的用途，例如，如果希望某些內容占據大部分視口高度。這時就可以使用相對的單位vh和絕對單位px進行混合計算：
.content { height: calc(100vh - 60px);}當視口大小發生變化或者用戶使用較大或較小的設備時，100vh的值將動態更新，因此計算也將動態更新。使用calc() 的好處在于，它既可以避免添加一些 magic number，也可以避免使用 JavaScript 來計算樣式的屬性值。
我們可以通過傳入CSS自定義屬性來擴展 calc() 的功能。一個非常有用的例子就是使用 hsl() （表示色調、飽和度和亮度）來創建一致的調色板。給定飽和度、亮度和起始色調的值，就可以使用 calc() 函數計算互補值來構建完整的調色板。
.colors { --base-hue: 140; --saturation: 95%; --lightness: 80%; --rotation: 60; color: #222; text-align: center;}.color { padding: 0.25rem; background-color: hsl(var(--hue), var(--saturation), var(--lightness));}.color1 { --hue: calc(var(--base-hue));}.color2 { --hue: calc(var(--base-hue) + var(--rotation));}.color3 { --hue: calc(var(--base-hue) + var(--rotation) * 2);}生成的調色板：
圖片
在使用 calc() 函數時需要注意：
clamp() 的實際用途：在可接受的值范圍內設置邊界。clamp() 被用在 length、frequency、angle、time、percentage、number、integer 屬性中。其語法如下：
clamp(MIN, VAL, MAX)clamp(MIN, VAL, MAX) 其實就是表示 max(MIN, min(VAL, MAX))。clamp() 函數接收三個用逗號分隔的表達式作為參數，按最小值、首選值、最大值的順序排列，這三個值得順序很重要。
這個表達式可以是數學函數、字面量或其它計算為有效的參數類型表達式，如 attr()，或嵌套的 min 和 max 。作為數學表達式，可以使用加減乘除運算而無需使用 calc() 函數。也可以用括號來確定計算順序。表達式中的每一個值都可以用不同的單位。
來看下面的例子：
.element { width: clamp(200px, 50%, 1000px);}有一個元素，其最小寬度為200px，首選值為50%，最大值為1000px。
圖片
這個元素的寬度永遠不會低于200px，首選值是50%并且僅在視口寬度大于400px和小于2000px 時才有效，寬度不會超過1000px。
那 clamp() 是如何計算的呢？當 clamp() 用作值時，它等同于使用max()和min()函數：
.element { width: clamp(200px, 50%, 1000px); width: max(200px, min(50%, 1000px));}這里的50%取決于瀏覽器視口寬度，假設視口寬度為1150px，解析的過程如下：
1. width: max(200px, min(50%, 1000px));2. width: max(200px, min(575px, 1000px));3. width: max(200px, 575px);4. width: 575px;
圖片
假設需要要一個最小為16px，最大為50px的標題。clamp()函數將給出一個介于兩者之間的值，而不會低于最小值或超過最大值。
.title { font-size: clamp(16px, 5vw, 50px);}在這里使用clamp() 就非常完美，因為它可以確保使用的字體大小易于訪問和閱讀。如果要使用 min() 設置最大字體，就無法在小視口中控制字體。
.title { font-size: min(3vw, 24px); }
圖片
在移動視口中，字體很小。因此，不要只對字體大小使 min() 函數。當然，也可以通過媒體查詢來取消或添加它。正如上面所說的，可以在 max() 函數中嵌套一個 min()，這將模擬clamp()函數：
.title { font-size: max(16px, min(10vw, 50px));}有時需要邊框寬度和半徑應該在移動設備上更小，通過使用 clamp() 就可以根據視口寬度來使它們動態變化。
.element { box-shadow: 0 3px 10px 0 red; border: min(1vw, 10px) solid #468eef; border-radius: clamp(7px, 2vw, 20px); box-shadow: 0 3px clamp(5px, 4vw, 50px) 0 rgba(0, 0, 0, 0.2);}
圖片
圖片
當使用 CSS Grid 布局時設置網格間隙，并且希望為移動視口縮小間隙。就可以使用 clamp()：
.wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: clamp(1rem, 2vw, 24px);}
圖片
min() 函數方法接受一個或多個用逗號分隔的表達式作為他的參數，數值最小的表達式的值將會作為指定的屬性的值。
min() 的實際用途：以包含元素響應上下文的方式，在最大允許值上設置邊界。盡管是 min() 函數，但結果是提供的值將作為屬性允許的最大值。
下面來看一個簡單的例子，希望元素的最大寬度為500px：
.element { width: min(50%, 500px);}
圖片
瀏覽器必須選擇最小的值（50%，500px）。選擇該選項取決于視口寬度。如果50%的計算值大于500px，那么它將被忽略，而使用500px。否則，如果50%的計算值小于500px，則50%將用作寬度值。視口寬度為1000px：
圖片
圖片
有一個容器的寬度是其父級寬度的80%，并且寬度不應超過780px，那么該如何寫：
.container { max-width: 780px; width: 80%;}如果使用 min() 函數，就可以這樣設置最大值，代碼簡潔了很多：
.container { max-width: min(80%, 780px);}在 CSS 中使用漸變時，可能需要通過使顏色之間的過渡更平滑一些來針對移動設備進行一些調整。來看一個例子：
.element { background: linear-gradient(135deg, #2c3e50, #2c3e50 60%, #3498db);}
在移動設備中，這個顏色漸變就會有一條分割線，不是很好看。可以通過媒體查詢來解決這個問題：
@media (max-width: 700px) { .element { background: linear-gradient(135deg, #2c3e50, #2c3e50 25%, #3498db); }}雖然這樣是可行的，但我們可以使用CSS 中的 min() 函數使這個顏色漸變更加動態：
.element { background: linear-gradient(135deg, #2c3e50, #2c3e50 min(20vw, 60%), #3498db);}這樣顏色漸變就看起來順滑了很多：
圖片
max() 函數方法接受一個或多個用逗號分隔的表達式作為他的參數，數值最大的表達式的值將會作為指定的屬性的值。
max() 的實際用途：以包含元素響應上下文的方式，在最小允許值上設置邊界。
下面來看一個簡單的例子，通常，頁面的側邊欄有一個固定的寬度，而主寬度是靈活大小的。如果視口足夠大，可以使側邊欄更具動態性以占用更多空間。為此，需要使用 max() 函數為其設置最小寬度。
.wrapper { display: flex;}aside { flex-basis: max(30vw, 150px);}main { flex-grow: 1;}側邊欄的最小寬度為150px，如果視口寬度大于500px（500*30%=150），則最小寬度為30vw。
本文鏈接：http://www.www897cc.com/showinfo-26-17806-0.html有趣的 CSS 數學函數，你學會了嗎？
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com
上一篇： OpenHashTab：確保數據完整性和安全性的秘密武器
下一篇： 探索Java的HTTP請求與響應處理機制
Copyright ? 2016-2023 天津谷騏科技有限公司 版權所有 sitemap.xml
違法及侵權請聯系：2376512515@qq.com 津ICP備18001702號
津公網安備 12010102000574號