Florens Verschelde 深入研究了 Tim Brown 几天前谈论的 CSS 锁概念 背后的数字。
当我试图理解 Tim 的实现并创建它的变体时，我很难弄清楚究竟发生了什么。 我做了很多草稿计算，我认为分享一个数学解释会很有用。
以下是我的外行解释
- 您可以使用 视窗单位 使值（如
font-size）变得灵活。 - 仅使用视窗单位，该值可能过于灵活，导致值过小或过大。
- 您可以使用 @media 查询“锁定”上限和下限。
- 您仍然需要一个复杂的计算来计算两个“锁”之间的“中间”值。
- 计算的复杂程度可能会有所不同，尤其是在尝试使用相对单位并适应用户字体缩放时。
在一个特定示例中，代码最终如下所示
@media (min-width: 320px) and (max-width: 959px) {
h1 {
font-size: calc( 1.5rem + 16 * (100vw - 320px) / (960 - 320) );
/* For a negative slope, we have to invert the breakpoints */
line-height: calc( 120% + 3.2 * (100vw - 960px) / (320 - 960) );
}
}请记住，有一个 PostCSS 插件。