CSS 数学函数之calc、clamp、min、max

回想过去，CSS 需要兼容各种版本的浏览器，那种在效果和可用之间痛苦选择的经历记忆犹新。现在的 CSS 能够做很多事情，而对于浏览器的兼容性只需考虑主流的，并且大部分主流的浏览器都支持最新 CSS 特性。本文来总结一下CSS中数学函数之min、max、calc、clamp。

min()

min() 的用途：以一种包含元素响应上下文的方式设置最大允许值的边界。这看起来和名称有点相反，但结果是提供的值将作为属性的最大允许值。

给定宽度：min(80ch,100vw)，结果是在更大的视窗中，将选择 80ch ，因为它是两个选项中的较小值，但它的作用类似于基于上下文可用空间的最大值。一旦视口缩小，将使用值 100vw ，因为它被计算为小于 80ch，但它实际上为元素的宽度提供了一个最大边界。

.container 类

刚才提供的示例是新的定义 .container 的方法，只做了一个小小的调整。min() 函数允许嵌套的基本数学运算，这意味着可以翻转来减去一些空间，作为定义左右填充的交换，如下所示:

.container {

    width: min(80ch, 100vw - 2rem);

}

在较大的视窗中（即宽度超过80ch），该元素可以宽度扩展到最大的80ch，并且一旦该宽度下面视窗缩小，小于 80ch 的时候，宽度将使用 100vw - 2rem，相当于定义了在元素每一侧“填充” 1rem 。

在此示例中，还可以将元素改为 100% 而不是vw 使其响应父元素的宽度：

.container {

    width: min(40ch, 100% - 2rem);

    margin-right: auto;

    margin-left: auto;

}

这样定义的好处是无需媒体查询即可响应调整大小。

除了上述用法，还可以用于背景定义，如下：

.background-image {

    background: #efefef url(https://crayon.devpoint.cn/assets/images/bgs/main.jpg)

        no-repeat center;

    background-size: min(800px, 100%);

}

上面代码实现的效果是：当视窗宽度超过 800px 时，背景最大宽度为 800px，当宽度小于 800px 的时候，背景的宽度就是 100% 。

max()

max() 的用途：以包含元素响应上下文的方式设置最小允许值的边界。是上面介绍的 min() 的反义词，下面来看看实例。

定义上下文边距

如果桌面尺寸为 1280px，放大 4 倍，那么内容相当于 320px 的设备。然而，与移动电话相比，它的方向仍然是横向的。这种大小的视窗意味着读取和执行操作的区域大大减少。此外，在放大窗口中查看时，看起来适合手机的尺寸会变得很大。max() 提供了更优雅地处理边界的方法，在移动适配方面通常使用 rem 作为尺寸单位。但对于用于分隔内容部分的较大空间，使用了以下方法，允许高视图相对增长，并减少较短视图的距离，这适用于缩放视图。

.element + .element {

    margin-top: max(8vh, 2rem);

}

上面的样式，在较高的视窗中，8vh 将被使用，在较小或放大的视窗中，2rem 将被使用。对于有缩放功能，并需要适配各种移动终端的功能上，使用这种方式可以对最终用户产生重大影响。

在iOS中使用防止浏览器放大输入框文字

是否经历过在iOS上聚焦表单输入时强迫浏览器缩放的情况？对于任何字号小于 16px 的输入，都会出现这个结果。使用 max() 可以简单的解决这个问题：

input {

    font-size: max(16px, 1rem);

}

上面的代码 max() 的使用确保了无论提供的是什么值，字体大小都至少为 16px ，从而防止浏览器被迫缩放。

calc()

calc() 的用途：执行基本的数学运算，常用于动态计算高宽值，支持+ - * / 运算，能够在单位类型之间进行插值（例如 rem 到 vw）,实际项目中主要用于自适用窗口的大小。

例如，页面的内容区为除导航高度之外的全部窗口大小，过去常用 position: absolute; 来实现自适应高度，使用 calc() 简洁多了。

.content {

    height: calc(100vh - 80px);

}

当窗口调整大小或在更大分辨率又或者手机端时，100vh 的值将动态更新，因此高度也随之变化。

生成调色板

可以通过传入CSS自定义属性来扩展 calc() 的功能。一个非常有用的例子是使用 hsl() 创建一致的调色板。给定饱和度、亮度和起始色调的值，计算互补值以构建完整的调色板。

.colors {

    --base-hue: 140;

    --saturation: 95%;

    --lightness: 80%;

    --rotation: 60;



    color: #222;

    text-align: center;

}



.color {

    padding: 0.25rem;

    background-color: hsl(var(--hue), var(--saturation), var(--lightness));

}



.color1 {

    --hue: calc(var(--base-hue));

}



.color2 {

    --hue: calc(var(--base-hue) + var(--rotation));

}



.color3 {

    --hue: calc(var(--base-hue) + var(--rotation) * 2);

}

clamp()

clamp() 的用途：在可接受的值范围上设置边界，作用是把一个值限制在一个上限和下限之间，当这个值超过最小值和最大值的范围时，在最小值和最大值之间选择一个值使用。

clamp() 函数接收三个参数，并且需按照以下顺序。

1. 范围内的最小值
2. 理想值/首选值
3. 范围内的最大值

可能已经遇到过使用 clamp() 的一个领域是用于流体排版。其基本概念是，字体大小值可以根据视口大小灵活地调整，这是为了防止大标题触发溢出，或占用太多的视窗。

流体 h1 样式的一个非常基本的定义：

h1 {

    font-size: clamp(1.75rem, 4vw + 1rem, 3rem);

}

相对响应填充

使用百分比作为填充的有趣之处在于它是相对于元素的宽度的，意味着它有点像容器相关的单位，可以使用 vw。

下面的实例使用了以下填充定义，其中填充将相对于元素的宽度增长和收缩。它永远不会小于 1rem ，也永远不会大于 3rem：

.element {

    padding: 1.5rem clamp(1rem, 5%, 3rem);

}

与媒体查询相比，这个填充的最大好处是，由于这个填充定义是相对于元素的，当元素在页面上有更多空间时，它就会变大，而如果元素被放置在狭窄的列中，它就会变小。这需要与基于媒体查询的实用程序类进行大量的协调。

总结

随着响应式设计的发展且日益细化，CSS本身也在不断发展，为前端开发者提供了更多的选择。