所有主要引擎現在都支援 CSS 階梯值數學函式: round(), mod(), 和 rem()。
步階值是根據另一個項法來轉換指定值 步驟值。
round()
函式
round()
函式需要將值四捨五入,
循環間隔和選用的四捨五入策略
這個值會根據四捨五入策略四捨五入,
達到四捨五入間隔的整數倍數。
要四捨五入的值或四捨五入間隔,必須是 CSS 自訂屬性。雖然可以將這兩個值硬式編碼,但是 如果您可以自行計算值,請將該值四捨五入。
下列 CSS 會將 --my-font-size
的值四捨五入至 1rem
的間隔。
font-size: round(var(--my-font-size), 1rem);
預設的四捨五入策略為 nearest
。上一個範例包括
捨入策略如下:
font-size: round(nearest,var(--my-font-size), 1rem);
四捨五入策略可能的值如下:
up
:等於 JavaScriptMath.ceil()
方法。將值無條件進位 取得捨入區間的整數倍數down
:等於 JavaScriptMath.floor()
方法。將值四捨五入 取得至最接近的整數倍數nearest
(預設):與 JavaScriptMath.round()
相同。將 值向上或向下,直到捨入間隔的整數倍數。to-zero
:等於 JavaScriptMath.trunc()
方法。將值四捨五入 小於接近零的圓形間隔的整數倍數。
進一步瞭解 round()
:
新的 CSS 數學:round()
、
Dan Wilson 製作
rem()
和 mod()
函式
rem()
和 mod()
CSS 函式的運作方式與 JavaScript 類似
remainder 運算子 (%)。這兩個值會分成兩個值,第一個 (被除數) 除以第二個值 (除數)。
並傳回餘數。
margin: rem(18px, 5px); /* returns 3px */
這兩個函式的差異在於,rem()
一律會使用符號
,因此如果第一個值是正數,
都是正數mod()
函式會取得除數的符號。
進一步瞭解 rem()
和 mod()
:
全新的 CSS 數學:rem()
和 mod()
,
Dan Wilson 製作