了解如何使用这些得到很好支持的 CSS 函数来控制元素大小、保持适当的间距,以及实现流式排版。
随着响应式设计变得越来越细致,CSS 也在不断演变,
能够增强控制力min()
、
max()
和
clamp()
函数,
可支持所有现代浏览器的功能之一,
使网站和应用更具动态性和响应性。您可以使用这些
函数来控制元素大小和大小,保持元素之间的间距
和创建灵活流畅的排版。
数学函数
CSS 值和单位级别 4calc()
、min()
、max()
和clamp()
允许将带有加法 (+)、减号 (-)、乘法 (*) 和除法 (/) 的数学表达式用作分量值
浏览器支持
min()
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
max()
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
clamp()
浏览器支持
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
-
<ph type="x-smartling-placeholder">
用法
您可以在任何 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 而言 风格 “从 45 到 75 个字符之间,任何字符都被广泛认为 Serif 字体字体中的单列页面集的行长符合要求 文字大小。”
为确保文本块的宽度介于 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 技巧
读者 Calu{7} 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 的封面图片 不要喷溅。