有趣小贴士：使用 calc() 改变 Hero 组件的高度

几年前，流体排版 的概念被提出。主要思想是，如果您知道在两个不同的视窗大小下字体的尺寸，那么就可以让字体在这两个尺寸之间平滑缩放。我们在 FitText (当然，指的是标题) 中使用了一个 jQuery 解决方案，直到 calc() 函数发布，为我们提供了一个纯 CSS 解决方案。

p {
  font-size: calc(16px + (24 - 16)*(100vw - 400px)/(800 - 400));
}

这里最重要的数字是 24px (高达 800px 视窗的较大的字体) 和 16px (低至 400px 视窗的较小的字体大小)。在这个上下文中，我不会使用“最小”或“最大”来描述字体大小和视窗，因为这有点误导。实际上，您仍然需要为小于 400px 和大于 800px 的视窗提供默认字体大小 - 否则，字体将随着方程式相同比例的缩放而不断变小(或变大)。或者，如果您喜欢，可以为更大的屏幕尺寸定义另一个比例。

它运行良好，您应该仔细检查背后的数学原理。

填充和行高？

我非常喜欢流体排版的概念，于是开始思考它是否可以应用于其他属性。答案是可以！您无法使用百分比，但只要坚持使用 px、em 或 rem 单位，就可以了。我更喜欢使用像素，因此我所有的实验都使用像素，但是有一个 很不错的生成器 可以帮助您进行转换（如果您需要）。

所以，回到 padding 和 line-height。使用相同的 calc() 逻辑，我们可以实现一个完全流动的 *布局*，在定义的屏幕尺寸下具有固定值。

我在 这个网站 上实现了这个想法，但只将其应用于 font-size 和 line-height。是的，随着您使用它，您会越来越容易忽略所有这些数学运算并直接应用它们。

关于“Hero”组件的延伸

如果您像我一样，那么您可能对我们都已知为 hero 组件 的东西有所争议。它无处不在，已经成为像 Bootstrap 这样的设计系统中的一个基本元素。

我主要的问题是关于使它们响应式的最佳方式。如果它不是一个 *全屏* Hero (即在任何尺寸下都占据整个视窗)，那么我通常会问设计师页面应该如何表现。通常，Hero 页面的比例很好，这样我就可以使用 padding-bottom 以百分比形式，并对内部内容进行绝对定位。这种方法在大多数情况下都能奏效，

这很有趣，效果很好，尤其是在网站的桌面版本上。您最终会得到一个整洁的 Hero 部分，比例很好，内容居中。

但是，当您开始缩小视窗时会发生什么？Hero 在一定程度上仍然可读，您确实需要更改比例。

假设我们正在使用桌面优先的响应式方法，我们可以从一个水平矩形开始，向下缩放，直到在小屏幕上只剩下一个垂直矩形。

这是一个 PITA，因为您最终可能会写很多行 CSS 代码来使 Hero 部分在不同的断点上看起来很好且可读。

一定有更好的方法，对吗？如果 Hero 在页面宽度变窄时可以增加高度会怎么样？

回到流动性！

因此，我回到了 calc() 函数，它在其他情况下有效，例如让浏览器处理数学运算，并根据视窗的变化相应地缩放内容。

这是我们从流体排版示例开始的 CSS 代码

p {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  font-family: 'Open Sans', sans-serif;
  font-size: calc(24px + (18 - 24)*(100vw - 400px)/(1200 - 400));
  line-height: 1.5;
  padding: 10px;
}

我们想要的是：一个 Hero 组件，当您缩小页面时，它会变得更大。我使用像素单位表示 *流动部分*，并在其他地方使用百分比。

这是一个关于我最终得到的解决方案的屏幕截图

实时演示

当您想要为文本提供更多垂直空间时，这很有用。从大到小缩小视窗宽度最终将为相同文本提供更多行，因为字体大小不能太小。

相当不错，对吧？calc() 又一次证明了它可以解决我的问题。

是的，有一些注意事项

浏览器支持非常好，几乎覆盖了 93% 的用户 (在撰写本文时)，主要例外是 Opera mini。

此外，请记住，这种 calc() 技术仅支持 px、em 和 rem 单位。但是，由于 Hero 通常宽度为 100%，因此我们在此处介绍的示例很容易将 padding-bottom 百分比之类的单位转换为像素。

哦！还要记住，在 calc() 函数中的断点之前和之后重置您的值。否则，您最终可能会为目标属性获得非常大或非常小的值。

您怎么看？

这可能只是我们处理这种情况的一种方式，它主要由我对 calc() 函数的兴趣驱动。因此，这引发了一个问题：您是如何处理缩放 Hero 组件高度的？您是否已将 calc() 应用于此？您是否更喜欢在不同的宽度下处理断点？您是否使用了其他方法？在评论中告诉我吧！