可以使用CSS新属性 clamp()
来创建一个基于视窗大小的文本大小范围,该范围允许您在最小和最大值之间调整文本大小。clamp()
接受三个参数,分别是:最小值、通常值和最大值。
语法如下:
font-size: clamp(最小值, 通常值, 最大值);
其中:
在使用时,最小值、通常值和最大值必须都带有相同的度量单位,例如px、pt、em等。
以下是一个使用 clamp()
属性调整文本大小的示例:
body {
font-size: clamp(16px, 4vw, 20px);
}
解释:这会将 body
元素中的文本大小设置为一个介于16px到20px之间的值,并且随着视口宽度的变化而发生调整,维持在最小大小和最大大小之间。
需要注意的是,目前还不是所有的浏览器都支持 clamp()
属性,因此建议使用备用方案来确保网站与所有主流浏览器兼容。