CSS中的数学函数：min、max、calc、clamp

如今，CSS可以做很多事情，但是对于浏览器兼容性你只需要考虑主流的，大多数主流浏览器都支持最新的CSS功能。本文总结了 CSS 中的数学函数 min、max、calcc 。

min()

min()的目的：以包含元素响应上下文的方式设置最大允许值的限制。这可能看起来与名称相反，但结果是提供的值被用作属性的最大允许值。

输入宽度：min(80ch,100vw)，结果是在较大的视口中，80ch❀❀是选择的两个，它的作用类似于基于的最大值上下文可用空间。当视口缩小时，使用值 100vw，因为计算结果小于80ch，但实际上宽度有一个最大界限。

.container 类

刚刚提供的示例是 .container 的新定义，仅进行了少量调整。 min() 函数允许嵌套基本数学，这意味着您可以翻转以减去一些空间以换取定义左右填充，如下所示：

.container {
    width: min(80ch, 100vw - 2rem);
}

在较大的视口中（也就是说，如果宽度超过80ch），元素可以扩展到最大宽度80ch，如果窗口缩小到这个宽度以下且小于，则使用该宽度100vw - 2rem，相当于在元素1rem的每一侧定义“填充”。

在此示例中，您还可以将元素更改为100%，而不是vw，以使其响应此父优势的宽度：❙定义是没有媒体请求是必需的它响应于调整大小。

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

.background-image {
    background: #efefef url(https://codeqd.com/zb_users/upload/2023/09/main.jpg)
        no-repeat center;
    background-size: min(800px, 100%);
}

以上代码实现的效果是：如果窗口宽度大于800px最大背景宽度为800px，如果宽度小于800px，则背景宽度为11%。

max()

max()的用途：以所包含元素响应上下文的方式设置最小允许值的限制。是上面介绍的min()的反义词。让我们看看下面的例子。

定义上下文边距

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

.element + .element {
    margin-top: max(8vh, 2rem);
}

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

iOS 中阻止浏览器缩放输入框文本

您是否有过在 iOS 上专注于表单输入时强制浏览器缩放的经历？对于字体大小小于 16px 的任何输入，都会出现此结果。使用 max() 可以轻松解决这个问题：

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

使用上面的代码 max() 确保无论提供什么值，字体大小至少为 ❙❙ ，这会阻止浏览器免于被迫缩放。

calc()

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

例如，页面的内容区域是不包括导航高度的整个窗口大小。过去经常使用position:absolute;来实现自适应高度。使用 calc() 更容易。

.content {
    height: calc(100vh - 80px);
}

当窗口放大或移动到更大的分辨率或在手机上时，100vh的值会动态更新，因此高度也会相应变化。

生成调色板

calc()的功能可以通过传入CSS自定义属性来扩展。一个非常有用的示例使用 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);
}

相对响应式填充

使用百分比进行填充的有趣之处在于，它是元素的宽度，与元素的宽度相关。 element 有点 对于容器相关的单位，可以使用vw。

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

.element {
    padding: 1.5rem clamp(1rem, 5%, 3rem);
}

与媒体填充定义相比，此填充的最大优点是，因为这相对而言，如果元素在页面上的空间越大，它就会变得越大，如果元素放置在狭窄的列中，它就会变得更小。这需要与基于媒体请求的实用程序类进行大量协调。

总结

随着响应式设计的发展并变得更加复杂，CSS 本身也在不断发展，为前端开发人员提供了更多选择。