持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情

在 CSS 中有很多不同的度量单位。你有 px 和百分比、vh、vw、em、rem 等。

有时你会希望通过组合两个或多个不同的单位来获得价值。CSS 有一个函数可以用来进行这样的计算—— calc(). 在本教程中，你将了解它是如何工作的。

你还可以将其他函数与这些相对单位一起使用 - 例如max,min和clamp- 当遇到不同的值时，请使用适当的值。这些在响应式布局中非常有用，并且可以替代使用媒体查询。

如果你学会适当地使用它们，你可以避免在使用媒体查询时调整窗口大小时可能发生的布局变化，并且代码更少！

calc 函数采用单个参数。此参数可以是一个组合任何长度单位和四个数学运算符+, -, /,的表达式*。

你还可以使用括号来指示与标准优先规则不同的评估顺序。

在calc()函数内部的表达式中，你可以使用 CSS 变量、通过 获得的值以及attr()来自函数 和 的max()值。min()``clamp()

calc()允许你根据复杂参数计算值。

注意：始终在数学运算符的两侧留一个空格。

该max函数接受逗号分隔值的列表并返回最大的值。每个值也可以是一个表达式（你可以用作函数的参数的任何内容也可以是该calc()函数中的参数之一）。

max 函数可以看作是确定某个事物的最小值的一种方法。

此功能的一个用例是使文本具有响应性，同时为维度提供最小值。

例如：

这样，文本将是视口高度的十分之一，除非视口高度变得太小。文本将始终具有font-size至少1rem以确保易读性。

与 max 函数一样，min可以接受任意数量的参数，包括其他max、、min或clamp函数，并返回它们之间的最小值。

min 函数可以看作是确定一个最大值。

例如，假设你正在创建一个表单，并且你希望它在屏幕宽度发生变化时响应。你需要给它一个最大宽度以避免在最大屏幕上可能发生的水平拉伸外观。

你可以这样写：

你的页面的宽度将等于视口宽度的 90%，或 600 像素宽，无论是最小的。因此，如果视口宽度大于~670px，表单将不会水平拉伸。

钳制函数将一个值钳制在上限和下限之间。它在具有定义限制的范围内选择一个值。

clamp取三个值。第一个是最小值，第二个是首选值，第三个是最大值。

钳位函数将返回首选值，除非它小于最小值（在这种情况下它将返回最小值）或者如果它大于最大值，在这种情况下它将返回最大值.

你可以使用clamp让布局元素在一个范围内响应地调整大小。

感谢你的阅读！