使用 Clamp() CSS 函数编写更少的媒体查询

这是一个巧妙的小技巧：

您可以使用clamp()CSS 函数来实现font-size响应式和流畅性！

它的工作原理是“限制”最小值和最大值之间的灵活值。

使用方法如下：

1. 选择最小值：例如16px
2. 选择一个最大值：例如34px
3. 选择一个灵活的值：例如5vw

h1 {
  font-size: clamp(16px, 5vw, 34px);
}

在此示例中，该h1 font-size值将为5%视口宽度。但前提是该值大于16px或小于34px。

例如，如果你的视口宽度是300px，你的5vw值将等于15px。但是，你将该font-size值限制为最小值16px，所以最终结果就是 。

另一方面，如果你的视口宽度是1400px，那你5vw就太夸张了70px！不过还好你把最大值限制在34px，所以它不会超过这个值。

哦，它还支持 padding！还有 margin！

以及任何其他接受长度、频率、角度、时间、百分比、数字或整数的属性！

如果您不需要支持 IE/旧版 Safari，浏览器支持也相当不错，请看：

我喜欢现代 CSS。你对 有什么看法clamp()？

编辑：如果您需要为旧版 Safari 添加替代实现，请务必查看评论中Darshak 的建议！

封面照片由Matt Artz在 Unsplash 上拍摄

感谢Madza为这个系列命名😄

嘿，我们联系吧👋

在 Twitter 上关注我并告诉我您喜欢这篇文章！

如果你真的喜欢它，请务必与你的朋友分享，这会对我有很大帮助😄