🈲 😚 📧 CSS函数min（），max（）和钳位（） 🔙 👨🏽‍💼 🔪

支持CSS 比较功能min()，max()并clamp()于2020年4月8日在Firefox中出现。这意味着现在所有主要浏览器都支持这些功能。这些CSS功能扩展了我们创建动态布局和设计比以前更灵活的组件的能力。它们可用于调整容器元素，字体，缩进等的大小。的确，一位考虑到使用这些惊人功能的可能性来创建页面布局的网页设计师可能需要学习以新的方式思考。今天，我想谈谈这些功能的功能，解释其中可能难以理解的所有内容，并提供使用它们的实际示例。

浏览器支持

首先，我想谈谈浏览器对功能的支持min()，max()以及clamp()。然而，它们相对较新出现。应该注意的是，这些功能min()和max()使用的浏览器支持级别相同。

对min（）函数的支持（max（）支持信息也看起来像这样）

以下是有关对该函数的支持的信息clamp()。

Clamp（）功能支持

CSS比较功能

CSS规范告诉我们有比较函数min()，max()并clamp()允许我们比较表达式的值并表示其中之一。函数返回的值取决于其功能。探索这些功能。

Min（）函数

函数min()采用一个或多个用逗号分隔的值，并返回其中的最小值。此函数用于将CSS属性的值限制为严格指定的最大级别。

考虑以下示例。我们需要元素的最大宽度不超过500px。

.element {
    width: min(50%, 500px);
}

视口宽度为1150px（大于1000px）时，元素的宽度为500px，

浏览器需要从50%和中选择最小值500px。视口的宽度会影响选择结果。如果视口宽度的50％大于500px，则此值将被忽略，函数将返回500px。

否则，如果视口宽度的50％较小500px，则结果值将用于调整元素的宽度。您如何看待观看区域的宽度不超过其宽度的50％500px？这显然是1000px。有了这个宽度，传递给函数的两个值将是相同的。如果视口的宽度小于1000px，那么它将用于调整元素的宽度。

如果视口的宽度小于1000像素，则将使用此宽度的50％来调整元素的宽度，

我希望我能够清楚地解释所有这些内容。我考虑了很长时间min()，试图深入了解它的本质。因此，我非常想清楚地谈论它。这是一段视频，演示了使用此功能的结果。

项目的宽度限制为500像素，

这是一个用于录制上述视频的交互式示例。要查看运行min()中的功能，请尝试调整浏览器窗口的大小。

函数max（）

该函数max()采用一个或多个用逗号分隔的值，并返回其中最大的一个。此函数用于固定CSS属性可以采用的最小值。

在以下示例中，我们需要元素宽度至少为500px。

.element {
    width: max(50%, 500px);
}

如果视口宽度的50％大于500px，则此值将用于调整元素的宽度，

浏览器需要从50%和中选择最大值500px。选择取决于视口的宽度。如果视口宽度的50％小于500px，则浏览器将忽略此值并使用该值500px。

如果视口宽度的50％较大500px，则元素的宽度将设置为等于该值。如您所见，功能max()与功能相反min()。

为了更好地理解这一点，请看一下这个交互式演示。

钳位（）函数

该功能clamp()允许您通过设置其上限和下限来限制某个值的变化范围。它包含三个参数：最小值，计算（推荐）值和最大值。如果计算出的值不超过传递给函数的最小值和最大值所限制的限制，则它将返回该值。

这是一个例子。

.element {
    width: clamp(200px, 50%, 1000px);
}

在这里，我们调整元素的宽度，该宽度不应200px越来越小1000px。如果in的值50%不超过这些限制，则使用该值。这是它的外观。

如果视口宽度的50％落入200px-1000px的范围内，则此值将用于设置元素的宽度。在这种情况下，这是575px。

让我们来看看这个例子：

元素的宽度永远不会更小200px。
50%仅当视口的宽度越来越大时400px，才使用该函数的第二个参数设置为2000px。
项目的宽度不会超过1000px。

结果，我们可以说该函数clamp()允许您指定传输给它的计算值可以更改的范围。

在这里，您可以尝试使用此功能样式化的页面。

the如何计算钳位（）函数的结果？

您可以在MDN上找到有关以下信息的信息：当将函数用作CSS属性的值时clamp()，该信息等效于应用max()和函数的构造min()。看下面的例子：

.element {
    width: clamp(200px, 50%, 1000px);
    /*  -    */
    width: max(200px, min(50%, 1000px));
}

该值50%取决于浏览器查看区域的宽度。想象一下，视口的宽度为1150px。

.element {
    width: max(200px, min(50%, 1000px));
    /* ,      1150px */
    width: max(200px, min(575px, 1000px));
    /*   */
    width: max(200px, 575px);
    /*   */
    width: 575px;
}

▍背景很重要

计算值取决于上下文。如果您指定的计算值，你可以用不同的测量单位：%，em，rem，vw/vh。即使该值以百分比表示，在计算时，也可以使用查看区域的宽度-如果该元素在tag中<body>，则可以使用另一个区域的宽度，即该元素的容器。

ath数学表达式

值得一提的是，使用函数时，clamp()您可以向其传递数学表达式，这使我们不必使用函数calc()。该规范告诉我们，clamp()可以在每个参数中使用完整的数学表达式。因此，不需要嵌套函数calc()。另外，如果您需要对最终值应用多个限制，则可以将两个以上的参数传递给该函数。

看下面的例子：

.type {
  /*  font-size ,   12px  100px */
  font-size: clamp(12px, 10 * (1vw + 1vh) / 2, 100px);
}

CSS比较功能将在我们设计页面布局的方式中发生什么变化？

通常，设计者在设计页面时会同时关注移动设备和桌面设备，并指望两种使用场景。在进行某些项目时，必须考虑更多方案。

我看到这种情况，如下所示。

楼上是当今页面的设计方式。以下是您将来可以期待

的内容：图的顶部是这些页面的设计方式。在这里，您可以看到几个步骤，这些步骤代表应在其上设计页面的不同查看区域。这些步骤可以例如表示属性的值。插图的下部显示了一个连续的值范围，可以通过将该值限制为一定的最小值和最大值来获得此值。我相信，例如，将来在设置字体大小时，设计师将做与以下所示类似的事情。

该属性的最小值，推荐值和最大值。

对我来说，这真是太好了。我很佩服在组件需要一定灵活性的项目上工作的想法。当然，并非所有组件都需要动态的，但是其中某些组件可能是动态的。

用例

▍侧栏和主页区域

左侧是侧面板。右边是页面的主要区域。

通常页面的侧面板具有固定的宽度，并且主要区域的宽度可以灵活地调整为查看区域。我们可以扩展侧边栏的功能，使其更加动态，使其具有足够大的查看区域，从而占用更多空间。为此，您需要使用函数限制侧边栏最小宽度的大小max()。

考虑以下示例。

.wrapper {
    display: flex;
}

aside {
  flex-basis: max(30vw, 150px);
}

main {
  flex-grow: 1;
}

该元件的最小宽度aside将是150px。30vw如果视口的宽度较大500px（500 * 30％= 150），它将采用大小。

→ 这是一个例子

▍标题字体大小

灵活的标题字体大小调整灵活的标题字体大小调整

是使用此功能的绝佳脚本clamp()。想象一下，我们需要标题的最小字体大小为16px-，最大字体大小为-50px。由于使用了该函数，clamp()我们可以使字体大小在这些值之内而不会变小或变大。

.title {
    font-size: clamp(16px, 5vw, 50px);
}

功能clamp()是上述问题的完美解决方案。它允许您设置字体大小，以便在查看区域的不同大小下仍可访问文本并易于阅读。例如，如果在此处使用函数min()，那么我们将无法控制显示在较小查看区域中的页面上的字体大小。

.title {
    font-size: min(3vw, 24px); /*  ,     */
}

以下是此想法的说明。

使用min（）函数会使文本在小屏幕上显得太小

，在移动设备的屏幕上，字体大小太小。因此，不建议仅使用设置字体大小的功能min()。当然，可以使用媒体查询来重新配置字体大小，但是使用CSS比较功能的意义就完全消失了。

如前所述，min()可以在function内部使用functionmax()。这使您可以重现该功能的功能clamp()。

.title {
    font-size: max(16px, min(10vw, 50px));
}

在这里，您可以尝试一个示例。

我想指出的是，在Twitter上进行讨论后，事实证明使用10vw字体大小作为计算值并不完全正确。即，我们正在谈论的事实是，如果用户放大浏览器，这将导致可访问性问题。

因此，最好这样做：

.title {
    font-size: clamp(16px, (1rem + 5vw), 50px);
}

在此，将表达式指定为计算出的字体大小(1rem + 5vw)。这样就解决了问题。

▍装饰头

使用非常大的字体显示的装饰性半透明标题，

您是否在标题下方看到大的半透明文本？这是一个装饰性标题，其尺寸应与视口的大小一致。要形成这样的标题，可以将函数max()使用以传递给它的度量单位表示的值vw。这样可以确保字体大小不小于指定值。

.section-title:before {
  content: attr(data-test);
  font-size: max(13vw, 50px);
}

→ 这是一个工作示例

▍在不同视域中输出平滑渐变

使用CSS调整渐变时，您可能需要动态调整它们以使在移动屏幕上显示的渐变更平滑。看下面的例子。有这样的渐变：

.element {
    background: linear-gradient(135deg, #2c3e50, #2c3e50 60%, #3498db);
}

移动屏幕上的渐变的特征是颜色之间的过渡太尖锐，

请注意，在移动屏幕上，分色的边界清晰可见。这是不好的。您可以借助良好的旧媒体查询来纠正这种情况。（糟糕，看来我已经将媒体查询视为“很好的旧技术”。）

@media (max-width: 700px) {
    .element {
        background: linear-gradient(135deg, #2c3e50, #2c3e50 25%, #3498db)
    }
}

尽管这是解决问题的一种正常方法，但在类似情况下，我们可以使用CSS函数min()。

.element {
    background: linear-gradient(135deg, #2c3e50, #2c3e50 min(20vw, 60%), #3498db);
}

结果如下所示。

在任何屏幕上观看时，渐变看起来都很平滑

→这是该想法的演示

▍半透明渐变

当您需要在照片上方放置文字时，则应在其下方“放置”渐变。这将使阅读文本更加容易。与前面的示例一样，渐变参数应取决于视口的大小。看下图。

在不同尺寸的屏幕上灵活的渐变设置

.element {
    background: linear-gradient(to top, #000 0, transparent max(20%, 20vw));
}

由于有了这一小改进，移动设备上的渐变看起来会比以前好得多。如果渐变大小等于（在桌面屏幕上）50父元素的％，那么在移动设备上，它应该已经是30％区域中的某个值。您可以使用函数设置渐变大小的最小值max()。

→ 这是一个例子

outer动态外边距

自定义缩进

可以使用与视口特征关联的单位来调整元素的动态缩进。但是，这种方法并不总是能很好地表现出来。事实是，用户可以在具有很大垂直高度的移动设备的旋转屏幕上查看页面。以下是使用媒体查询解决此问题的方法：

h1, h2, h3, h4, h5 {
    margin: 7vh 0 1.05rem;
}

@media (max-height: 2000px) {
    h1, h2, h3, h4, h5 {
        margin: 2.75rem 0 1.05rem;
    }
}

尽管此代码可以正常工作，但是只需一行代码即可达到相同的效果：

h1, h2, h3, h4, h5 {
    margin: min(7vh, 2.75rem) 0 1.05rem;
}

通过使用该函数，min()我们将最大缩进值设置为2.75rem。如您所见，它非常简单方便。

→ 这是一个工作示例

▍容器宽度

动态调整容器的宽度

假设我们需要一个容器元素，其宽度应为其父元素宽度的80％。容器的宽度不应超过780px。如何创建类似的容器？通常在这种情况下，他们会执行以下操作：

.container {
    max-width: 780px;
    width: 80%;
}

但是使用该函数min()可以像下面这样限制容器的最大宽度：

.container {
    max-width: min(80%, 780px);
}

→ 这是一个工作示例

▍垂直缩进

clamp()我喜欢此功能，因为它非常适合限制页面部分缩进的大小。请看以下示例，该示例显示了页面顶部（英雄部分）的配置。

设置位于页面顶部的部分的缩进您可以

仅使用一行CSS代码来灵活地调整此类部分的缩进。

.hero {
    padding: clamp(2rem, 10vmax, 10rem) 1rem;
}

→ 这是一个例子

▍边界和阴影

这是一段视频，显示了具有宽边框的元素。

具有宽边框的元素

在某些情况下，页面的设计使用具有宽边框和大半径半径的元素。在移动屏幕上显示此类元素时，它们的边界需要缩小。拐角半径也是如此。使用该功能clamp()可以动态调整边界参数，将其与查看区域的宽度绑定在一起。

.element {
    box-shadow: 0 3px 10px 0 red;
    border: min(1vw, 10px) solid #468eef;
    border-radius: clamp(7px, 2vw, 20px);
    box-shadow: 0 3px clamp(5px, 4vw, 50px) 0 rgba(0, 0, 0, 0.2);
}

在这里，您可以尝试一个可行的示例。

grid网格布局的单元格之间的距离

网格布局

使用该功能的一种有趣方法clamp()是grid-gap在网格布局中设置属性。特别是，我们谈论的是这样一个事实：在移动屏幕上，网格单元之间的距离将小于在桌面上。

.wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: clamp(1rem, 2vw, 24px);
}

如果您对在设计网格布局时使用CSS比较功能感兴趣，请阅读这篇不错的文章。

→ 这是本节的示例

in在CSS函数中用于无单位比较值

在试验CSS函数的过程中，我决定找出将函数clamp()作为最小值传递时会发生什么0。这是代码中的样子：

.element {
    width: clamp(0, 10vmax, 10rem);
}

这是不好的CSS。我相信事实是，此处不应使用没有计量单位的数字。

for适用于不支持min（），max（）和clip（）的浏览器的冗余机制

如同任何其他新的CSS功能，应用功能的情况下min()，max()和clamp()，你需要采取的备份机制的照顾。要创建这些机制，可以使用以下方法之一。

1.手动配置备份机制

此处，手动配置应理解为在代码中添加了享有广泛浏览器支持的属性。该属性必须放在使用CSS比较功能的属性的前面。可能是这样的：

.hero {
    padding: 4rem 1rem;
    padding: clamp(2rem, 10vmax, 10rem) 1rem;
}

在这里，支持的浏览器将clamp()忽略第一个表达式。不支持此功能的用户将使用第一种方法来调整缩进。

2.使用CSS指令支持

@supports可以使用旨在测试浏览器对各种技术的支持的指令来确定浏览器是否可以使用CSS比较功能。我更喜欢使用这种解决方案，而不是第一段中描述的手动解决方案。事实是，任何支持比较功能的浏览器也必须支持指令@supports。

.hero {
    /*     ,   min() */
    padding: 4rem 1rem;
}

@supports (width: min(10px, 5vw)) {
   /*   ,   min() */
  .hero {
    padding: clamp(2rem, 10vmax, 10rem) 1rem;
  }
}

▍关于内容可用性

虽然CSS比较功能为我们提供了一种使用它们创建更灵活的网页的新方法，但必须小心。例如，仅使用函数min()来设置属性是font-size不够的。事实是，在移动设备上，仅使用此功能设置大小的字体可能太小。设置特别重要的页面内容时，请记住限制最小和最大设置。否则，可能会恶化使用该项目的用户体验。

你使用CSS功能min()，max()和clamp()？

CSS函数min（），max（）和钳位（）