使用 clamp() 进行响应式设计

• 原文地址：clamp() for Responsive Design
• 原文做者：Caleb Hearth
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：Alfxjx
• 校对者：z0gSh1u、HurryOwen

新的 CSS 函数 clamp() 提供了一种经过给目标值设置最大最小值的范围来计算实际值方法。它的语法是 clamp([min], [calculated], [max])。当你基于屏幕尺寸，使用长度单位 vw 来缩放一些值时，这个函数颇有用。

该项技术很适用于跨多种屏幕尺寸的设计。常规的方法是根据屏幕的宽度使用媒体查询的方法来对样式作不一样的调整，可是这么作致使咱们在开发的时候要么以“移动端优先”为原则，开发小屏幕的应用，再按比例增长；要么是以“桌面端优先”为原则，开发适用于大屏幕的应用，再按比例缩小。经过使用 clamp() 函数，用一个已知的最大最小值来约束变化的范围，咱们开发人员能够减小对于样式响应式断点的依赖，这样就无需为了一致性检查不少种不一样的宽度了。

运河闸能够使船经过不一样水位的水域

为了理解 clamp() 是如何工做的，我喜欢用运河闸的比喻。运河闸使用两个能够升高和下降的船闸，以使船只能够越过它们。一旦船在闸板之间，则从高水位侧添加水或将水排到低水位侧，以分别升高或下降闸板之间的水位。这使船能够随水位轻轻浮动并在最小和最大水位之间移动。

更具体地说，clamp(100%, calc(1em + 1vw), 200%) 的效果与 max(100%, min(calc(1em + 1vw), 200%)) 相同。最神奇的就是中间的这个参数 calc(1em + 1vw)，将浏览器的宽度（或者说，视口的宽度）代入了计算之中。1vw 至关于视口宽度的 1%，所以 1em 加上视口宽度的 1% 的计算结果会随着浏览器的大小调整而变更。

让咱们来看看咱们是怎样经过此方法来调整字号大小的。下面的这个例子和我在个人我的网站上使用的方式很是相近：

body {
  font-size: clamp(100%, calc(1rem + 2vw), 1.375rem);
}
复制代码

拆分下来看，100% 一般表示着“当前页面的基本尺寸”，对于字号而言就是 16px。calc(1rem + 2vw) 使用 rem（一样是 16px ）加上视口宽度的 2% 来进行计算。1.375rem 则是我理想状况下的最大字号，为 22px。

clamp() 以及相关的 min() 和 max() 函数在本文写做之时都有了很好的浏览器支持：

在 MDN 中，clamp() 适用于任何使用了数字、百分数以及其余长度单位的样式中。但奇怪的是，当我尝试将其应用到 line-height 时，我发现 Safari 14 应该是支持 line-height: clamp(...) 这样的写法的（我尝试了 @supports），可是实际状况倒是回退到了基准的 line-height ，很是使人费解。最终我使用 line-height: min(calc(1.1em + 1vw), 32px) 从而实现了 line-height 响应式地根据个人内容高度来肯定。这里不须要设置一个最小值，由于我测试的宽度都不是很小，可是若是有最小值的需求的话，能够在最外层包裹一个 max()：line-height: max(100%, min(calc(1.1em + 1vw), 32px))。

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。