CSS“锁”

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度!

Tim Brown 使用了一个新的(比喻性的)术语来描述可以在两个设定值之间波动的值。

在运河和河流航运中,船闸是一种用于在不同水位之间的水域之间提升和降低船只的装置。这正是我们的公式所实现的。我们的公式是一个 CSS calc“锁”。

波动 在 1.3em 和 1.5em 行高之间,具体取决于屏幕宽度。

line-height: calc(1.3em + (1.5 - 1.3) * ((100vw - 21em)/(35 - 21)));

Bram Stein 为 PostCSS 创建了一个 辅助插件

“锁”的一部分是一个额外的媒体查询,它覆盖了极端值之一的值。类似于 Mike Riethmuller 在玩熔化行距时所做的事情 以及 Eduardo Bouças 如何使用最小值和最大值处理视口大小的字体

直接链接 →