CSS 函数——如何使用 calc()、max()、min() 和 clamp()

原文： CSS Functions – How to Use calc(), max(), min(), and clamp()

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

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

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

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

如何使用 CSS calc() 函数

calc 函数接收单个参数。该参数可以是任意长度单位和四个数学运算符 +、-、/、* 组合而成的表达式。

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

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

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

div {
    width: calc(100% - 2em);
}

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

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

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

此函数的一个用例是使文本具有响应性，同时为某个尺寸提供最小值。

例如：

h1 {
    font-size: max(1rem, 10vh);
}

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

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

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

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

你可以这样写：

.form {
    width: min(600px, 90vw);
}

你的页面的宽度将等于视口宽度的 90%或 600px 宽，选择两者之中最小的一个。因此，如果视口宽度大于 ~670px，表单将不会水平拉伸。

你可以在这个示例中看到运行的代码片段。尝试水平和垂直调整项目的大小，并查看表单宽度和字体大小的响应变化。

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

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

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

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

h1 {
    font-size: clamp(1rem, 10vw, 2rem);
}

div {
    padding: clamp(10px, 6vw, 50px);
    width: clamp(140px, 90vw, 600px);
}

在这个示例中看到它的实际效果！水平调整项目的大小并查看各种元素如何改变尺寸。

MDN 提供了有关所有这些函数的更详细信息：

你已经看到了这四个奇妙函数的概述，尝试在你的代码中使用它们吧！