瞭解如何透過我們支援完善的 CSS 函式控制元素大小、維持適當間距,以及實作流暢字體排版。
隨著回應式設計變得更加細緻,CSS 也會持續不斷改進,
作者更能掌控權min()
、
max()
和
clamp()
函式,
所有新式瀏覽器都能使用 這種最新瀏覽器
提升網站和應用程式的靈活度您可以使用
功能,控制元素大小和大小,並維持
以及建立靈活流暢的字體排版。
數學函式 (
CSS 價值和單位第 4 級calc()
、min()
、max()
和clamp()
) 允許使用加法 (+)、減法 (-)、乘法 (*) 和除法 (/) 來當做元件值
瀏覽器支援
min()
max()
clamp()
用量
您可以在任何 CSS 的右側使用 min()
、max()
和 clamp()
合理地表現對於 min()
和 max()
,請提供
引數清單,瀏覽器則會判斷
最小或最大以 width: min(1rem, 50%, 10vw)
為例
瀏覽器算出哪個相對單位的最小
也就是元素寬度的值
max()
函式會對最大值執行相同操作。
如要使用「clamp()
」,請輸入三個值:最小值,最小值為
計算起始值和最大值
您可以在 <length>
、<frequency>
、
可使用 <angle>
、<time>
、<percentage>
、<number>
或 <integer>
。個人中心
以便自行使用 (如 font-size: max(0.5vw, 50%, 2rem)
),
calc()
(如 font-size: max(calc(0.5vw - 1em), 2rem)
中所示) 或 組合 (例如
font-size: max(min(0.5vw, 1em), 2rem)
)。
以下舉例說明如何使用這些函式。
採用適當寬度
根據《The Elements of Typographic》 樣式 由 Robert Bringhurst 製作,「45 到 75 個字元的任何影片受到普遍認為是 襯線文字錶面中設定的單一資料欄頁面的行數理想長度 文字大小。」
為確保文字區塊寬度介於 45 到 75 個半形字元之間,請使用
clamp()
和 ch
(最多可再輸入 0 個字元)
單位:
p {
width: clamp(45ch, 50%, 75ch);
}
這會讓瀏覽器決定段落的寬度。這個引數會將寬度設為
預設值為 50%。如果 50% 小於 45ch
,系統會使用 45ch
做為寬度
,且如果 50% 的寬度比 75ch
寬,則會使用 75ch
。
您也可以只使用 min()
或 max()
來分解這個。如果您希望
元素寬度為 50%
,展開時不得超過 75ch
螢幕,請使用 width: min(75ch, 50%);
設定大小上限。
同樣地,您也可以使用 max()
設定清晰易讀的文字大小
函式,如 width: max(45ch, 50%);
中所示。瀏覽器在這裡選取
值相對較大,表示元素大小必須為 45ch
或更寬。
管理邊框間距
您也可以使用 max()
設定邊框間距大小下限。這個範例來自
CSS 秘訣、
Caluna de Lacerda Pataca 讀者分享這個想法:
針對較大的螢幕增加額外的邊框間距,但應保持最小邊框間距
螢幕大小方法是使用 calc()
或 max()
,並減去
元素兩側的邊框間距:calc((100vw - var(--contentWidth)) / 2)
、
或 max(2rem, 50vw - var(--contentWidth) / 2)
。在樣式表中,應該
如下所示:
footer {
padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}
流體字體排版
如要啟用流暢字體排版,
Mike Riethmeuller 是熱門技巧
使用 clamp()
函式設定字型大小下限、字型大小上限
並允許使用者縮放
在 clamp(),
設計字型縮放之前,必須使用複雜的樣式字串。現在,
就能讓瀏覽器為您代勞設定可接受的最小字型
大小 (例如標題的 1.5rem
)、大小上限 (例如 3rem
) 和
理想的尺寸 (例如 5vw
)。現在您採用的字體排版會隨著網頁的
再根據
只需要編寫少量程式碼:
p {
font-size: clamp(1.5rem, 5vw, 3rem);
}
其他資源
來自 @yer_a_wizard 的封面圖片 不受干擾。