CSS Calc 函数

第一次读到关于 CSS calc 函数的文章时，我兴奋不已。
说真的，在 CSS 中使用不同单位进行计算的能力真是太棒了。实际使用起来更是锦上添花。所以，本文将介绍 CSS calc 函数，并讲解它的一个使用案例。现在就开始吧。

CSS Calc 函数

CSS calc 函数用于在指定 CSS 属性值时执行计算。它可以用于任何可以使用数值的地方。它以表达式作为参数，并将结果作为使用该表达式的 CSS 属性的值。我们可以用它执行加法+、减法-、乘法*和除法/。很酷吧？这是一个简单的例子。

    div {
        width: calc(100% / 3);
    }

因此在上面的例子中，使用的宽度的值是 的评估结果100%/3。

该函数最令人激动的地方calc()在于它支持混合单位。这意味着您可以使用不同的 CSS 单位（例如视口宽度 (vw) 和像素 (px)）进行计算，并且仍然获得有效的结果。这正是 CSS calc 函数与预处理器计算的区别所在。预处理器无法做到这一点，因为它是在渲染时完成的。让我们来简单体验一下。

    div {
        height: calc(100% - 2em);
        width: calc((100% - 20px) / 3);
    }

你现在可能还看不懂它是怎么运作的，不过等一下，我们很快就会讲到实际应用。首先，使用 calc 函数时需要遵循一些规则。我们来了解一下。

规则

1. 使用乘法时，至少一个参数必须是数字。使用除法时，右边必须是数字。因此，calc(100px * 20px)和calc(700 / 40px)无效，而calc(100px * 20)和calc(400px / 40)有效。

2. 加法和减法运算符，例如+和 ，-必须用空格括起来。因此，calc(100%-2rem) calc(100%+ 2rem)、 或calc(100% -2rem)不会产生有效值。正确的语法是calc(100% - 2rem)在运算符前后都使用空格。

3. 除以零会导致错误。

4. 允许嵌套 calc 函数。在这种情况下，嵌套函数将被视为括号。

浏览器支持

calc 函数对从 IE9 开始的浏览器都提供了出色的支持。访问“我可以使用吗”查看详情。如果您为旧版浏览器或 Opera Mini 编写代码，请考虑使用数值作为后备。

让我们来看看 calc 函数的一个非常酷的用法。

响应式排版

嗯，它更像是流体排版和响应式排版。这使得你的文本在任何屏幕尺寸下都能很好地显示，而无需大量使用媒体查询。最近，我负责一个需要文本响应的项目​​。以下是一个我发现很有用的公式。

    font-size: calc(min font-size + font range * (100vw - min screen size)/ screen range);

其中字体范围 = 最大字体大小 - 最小字体大小
，屏幕范围 = 最大屏幕尺寸 - 最小屏幕尺寸。

让我们把这个公式应用到实际中。我们希望标题24px在一个宽度为 600px 的屏幕上显示，70px在另一个宽度为 1400px 的屏幕上显示。因此，我们的字体范围是70 - 24，46屏幕范围是1400 - 600。800将所有这些代入公式，我们得到：

    h1 {
        font-size: calc(24px + 46 * ((100vw - 600px) / 800));
    }

它的工作原理如下。

请注意，随着屏幕变小，文本会变得非常小。这可以与媒体查询结合使用，使其在所有屏幕上都显示良好。您可以参考这篇文章，详细了解此公式的变体及其如何与媒体查询配合使用。

以下是一些关于 calc 函数更多用例的文章。例如MDN 的 Calc()
的几个用例。

如何使用 Calc 函数？我很想知道。请留言。

有任何疑问或补充？欢迎留言。

感谢您的阅读。:)