CSS中的clamp（）是什么（以及如何使用）

如果您曾经尝试使您的网站在手机和巨型监视器上看起来都不错，那么您已经看到间距断裂，字体会急剧收缩或过度缩放，并且元素不堪重负或消失。为了解决所有这些问题，您最终会为一个布局编写一长串媒体查询。那就是Clamp（）可以提供帮助的地方。

这是一个简化设置大小的CSS函数。它不用在固定断点处定义多个值，而是让您设置最小值，首选和最大值，以便随着屏幕的变化而流畅地缩放元素。最好的部分是它们保持在您定义的极限范围内，因此没有布局不一致。

在这篇文章中，我们将解释Clamp（）的工作原理，为什么它通常比媒体查询更有效，以及Divi 5如何让您在不编写一行代码的情况下使用它！

什么是夹具（）

Clamp（）是CSS中的本机函数，用于定义根据屏幕尺寸调整的响应值。您没有为单个数字进行硬编码，而是为浏览器提供一个可以使用的范围 - 您设置了最小值，可扩展的优选值和最大值。这些使您的布局更加灵活，并且您不必为每个屏幕尺寸编写多个媒体查询。

让我们以一个流体字体大小的示例来理解这一点，该尺寸会根据屏幕尺寸增加/减小。

font-size: clamp(40px, 7vw, 100px);

在这里，字体尺寸永远不会低于40px，根据观看端口宽度的7％进行扩展，并在达到100px时停止增长。

使用Clamp（）的另一个重要好处是，与媒体查询不同，它可以避免刚性跳跃，并使您的样式更具可预测性和可读性。

这是什么意思？让我们通过将Clamp（）与媒体查询进行比较来理解这一点。

比较夹具（）和媒体查询

媒体查询是针对不同屏幕宽度调整字体大小的另一种常见方法。在这里，您可以在特定屏幕宽度上定义断点，在该屏幕宽度会更改。例如，您可以为台式机分配一个字体大小，另一个用于平板电脑，而移动设备为第三个字体，以使字体大小仅在屏幕宽度达到每个断点时会发生变化。

这种方法有效，但不是流体。在1000px和501px之间，字体大小保持锁定为100px。屏幕达到500px的那一刻，字体突然降至30px。这意味着没有平稳的过渡，只有急剧的变化。

因此，如果您想使缩放感觉更自然，则必须添加几个断点并手动调整每个主体尺寸。这将使您的代码冗长且肿。

相反，clamp（）使您免于突然的过渡和冗长的代码。实际上，它可以单行写入：字体大小：夹具（30px，7vw，100px）。

这告诉浏览器根据观看端口宽度的7％扩展30px和100px之间的字体。字体尺寸在所有屏幕尺寸上都可以流畅地调节，而无需突然跳跃或需要多个断点。您仍然定义限制，但是之间的缩放是自动和更一致的。

在现场动作中，以下是介质查询断点的字体调整和clamp（）外观的字体调整之间的比较：

对于响应式调整，clamp（）带来了明显的不同。它没有等待固定屏幕宽度触发样式的变化，而是响应介于两者之间的每个像素。这样可以使您的代码清洁器和设计在所有设备中更加一致。最重要的是，它得到了大多数现代浏览器的广泛支持，这意味着它将在这些浏览器上很好地渲染，从而使其成为可靠且实用的替代品。

clamp（）如何在幕后功能

clamp（）采用三个值一起使用以扩展任何CSS属性的值：

 clamp(minimum, preferred, maximum) 

该功能的每个部分都有特定的作用：

• 最小值：最低值。无论屏幕有多小，元素都不会缩放在此点以下。
• 优选值：此值根据屏幕大小进行量表。通常使用大众或calc（）表达式以允许自由流动性设置。
• 最大值：允许的最高尺寸。即使在非常大的屏幕上，元素也不会超过此值。

当浏览器计算最终大小时，它首先评估首选值。如果屏幕尺寸足够小，则浏览器使用最小值，以至于首选值降至最小值以下。同样，如果屏幕足够宽，以至于首选值超过最大值，则粘在其中。

这使得行为可以预测。您总是知道您的设计将保持在定义的范围内，但是在这些限制之间可以灵活地缩放。通过设置最小和最大限制，Clamp（）可确保您的元素流畅，但绝不超过。就足够了。

选择正确的优先价值

您可能已经注意到，首选价值（中间）在所有这些方面都起着更大的作用。它决定元素如何扩展。

首先，它不应该是固定值，例如夹具（40px， 80px ，120px），因为在这种情况下，首选值根本不会扩展。由于80px已经属于限制之间，因此浏览器将其锁定并忽略屏幕尺寸的变化。这导致静态值，它首先打败了使用clamp（）的目的。

相反，首选值应始终是相对的，例如夹具（40px， 7vw ，120px）。在这里，7VW响应视口的宽度，该元素可以跨屏幕尺寸平稳缩放。然后，夹具功能可确保其永远不会低于40px或超过120px，从而使尺寸响应于屏幕宽度的7％。

您还需要考虑相对值的大小。例如，较小的值（例如2VW）会更逐渐地跨屏幕尺寸缩放元素，而较大的值（如6VW）会导致更快的缩放率，并更快地达到最大尺寸。要识别哪种缩放为您有效，请尝试使用流体类型刻度计算器。它使您可以预览不同的值并导出即可使用的CSS。

注意：流体类型比例计算器输出VI值。如果您使用Divi中生成的输出，请确保将VI单元更改为大众。

夹具（）中的不同类型的单元

夹具（）内部的单元会影响其在设备之间的行为。您可以使用以下所有：

在大多数情况下，开发人员将PX用于最小值和最大值，以及像VW这样的流体单元作为首选值。这可以在控制和响应能力之间取得最佳平衡。

但是，您也可以使用最小值和最大值的相对单元，例如夹具（2REM，4REM，8REM）。如果根字体尺寸更改，这使您的设计更容易访问，并且更易于扩展。这对于调整浏览器设置以进行可读性的用户特别有用。

Divi 5中的夹具（）

CSS中的Clamp（）功能非常有用，但前提是您舒适地编写代码。那些喜欢在不触摸样式表的情况下视觉构建网站的人呢？您想使用夹具（）而不编写代码来构建流体布局吗？

如果是这样，Divi 5的高级单位可以提供帮助。

订阅我们的YouTube频道

长话短说，Divi 5支持Clamp（）作为整个构建器的高级单位，并且非常容易访问它们。无论何处，您都可以输入数字值，例如字体大小，间距或部分宽度，都可以直接找到使用Clamp（）的选项。

只需单击输入字段以从Divi 5中可用的不同高级单元中进行选择（请参阅标题文本大小旁边的深色列表） ，更改单位类型，并定义您的最小值，首选和最大值。

就是这样！根本没有编码或CSS - 您所做的只是输入一个夹具（）值，而您的标题就会像那样流畅。

Divi 5使得在不编写自定义CSS的情况下可以轻松创建流体，响应式设计。您可以通过视觉编辑器的简单性获得夹具（）的所有灵活性。 （Divi 5支持许多其他高级单元，包括夹具（））。

了解有关Divi 5的高级单位的所有信息

如何在Divi 5中使用clamp（）？

到目前为止，您已经看到在Divi 5中使用Clamp（）的容易。您只需选择clamp（）单元并添加您的首选值即可。没有自定义代码，没有CSS文件，只有一个干净的视觉接口。

但是，使Clamp（）真正强大的内部Divi的功能不仅仅是功能本身。这就是它的工作。

Divi 5是围绕模块化设计系统构建的。这意味着您可以将clamp（）与其他高级功能（例如设计变量和CSS函数）相结合，例如Calc（）使您的布局不仅响应迅速，而且可以稳定且易于扩展。这就是它变得有趣的地方 - Divi 5使得将夹具（）易于将其贴合您的工作流程。

夹具（）与设计变量一起使用

在Divi 5中有效使用Clamp（）的最佳，最有效的方法是将其与设计变量相结合。

设计变量可让您定义全局值（例如版式，颜色甚至字体尺寸），因此您可以在整个网站中使用它们以保持其一致。您还可以将Clamp（）值保存为数量变量。这使您可以节省响应式的全局值，以便在更改它们时，所有实例都会一次更新。

例如，您为H1-H6标题定义夹具（）尺寸：

并将它们保存在Divi Builder中的变量管理器中：

然后，整个网站的所有标题都将根据您定义的夹具（）值调整。

现在，如果您想更新H3大小，只需修改其数字变量，并且在您使用的任何地方都会更新它。 （想要在Divi 5中创建自己的排版系统？这是使用夹具（）和设计变量管理字体和字体尺寸的完整指南。）

这种方法允许集中控制，从而易于在全球更新版式设置，而无需手动调整每个实例。通过通过选项组预设应用这些夹具（）变量，可以简化设计过程。

clamp（）与calc（）结合

您也可以在clamp（）内使用calc（）函数来微调值的尺度。当您要添加基线大小，然后使用像大众这样的相对单元更精确地缩放它时，这一点尤其有用。

例如，字体尺寸：夹具（1REM，CARC（0.75REM + 2VW），2.5REM）使用Calc（）添加稳定的底座（0.75REM），然后用2VW进一步扩展它。

这允许字体根据视口宽度进行扩展，但也使其具有基本字体大小的启动。这对于在不需要多个夹具变化的情况下保持较小的屏幕上的可读性很有用。 Clamp（）内部的Calc（）技巧非常适合您想要对事物规模扩展的额外控制的任何地方。

夹具的实际用例（）

现在，让我们看一下一些常见的用例（）的常见用例，以及使用Divi 5：

1。所有设备的一致标题尺寸

响应式排版是夹具（）的最佳用例。由于我们已经在设计变量中使用clamp（）定义了标题（H1-H6）尺寸，因此是时候看到它们在行动了。

我们使用菜单项的H5S创建了此页面。然后，我们将H5数字变量应用于H5的每个标题文本大小。如您所见，每个标题都会在断点上缩放。

文本在我们所有定义的响应性断点中保持清晰，平衡和视觉上一致。

您也可以将clamp（）用于线高和字母间距。随着屏幕变得更宽，它通过略有增加的线路间隙或间距有助于保持最佳的可读性。一个很小的变化，但它会使长形式的内容感觉更加透气。

2。在大屏幕上的段落部分设置夹具（）宽度

段落自然很容易在移动设备上阅读，因为紧凑的屏幕中的短行使内容可消化。但是，在超宽的监视器上，如果全宽部分将文本延伸得太远，读者将被迫扫描整个水平行。感觉就像读广告牌。句子的理想线长度约为50-75个字符，因此，如果您的网站在宽屏幕上显示一个无尽的句子，则可能会失去读者的兴趣。

要解决此问题，请设置一个响应宽度，例如夹具（300px，65VW，800px），以将段落扩展到固定宽度（800px），以便在较宽的屏幕上也可以阅读段落。

这是使您的博客文章在更广泛的屏幕上可读的完美方法。

3。单个或特色图像的设置夹具（）宽度

同样，在超宽屏幕上，单个图像（如特色图像）可能看起来太大。它在平板电脑上看起来很完美，但在4K显示器上可能会尴尬地伸展，与其他内容相比，它会感到压倒性。

要解决此问题，请使用基于夹具的图像宽度，例如夹具（300px，60VW，1000px）。它确保图像随屏幕尺寸而流畅地生长，但在其主导布局之前停止。

否则，您只需为整个容器行设置一个夹具（）宽度，以确保所有元素（图像，标题和文本）均匀扩展。

4。用夹具添加流体填充和边距（）

设计师通常会获得台式机的间距，但在较小或非常大的屏幕上并不总是很好地工作。固定的填充物和边距并不总是随屏幕尺寸调整。那就是clamp（）有用的地方。

例如，在图像库中的夹具（0.5REM，2VW，2REM）边缘和一个夹具（1REM，3VW，4REM）填充板创建的空间会创建小的空间，从而从屏幕上缩小并缩放。

它为您的布局空间提供了大屏幕上的呼吸，并使手机上的操作紧绷：

Clamp（）还有助于在卡片布局，图像库，部分容器和文本块上平稳地填充填充，尤其是当您想要故意间距而无需持续断点调整时。

5。创建反应敏感的英雄部分，无缝扩展

使用Clamp（），您可以通过定义英雄标题，按钮填充和字幕间距使英雄部分在每个屏幕上看起来都很完美。我们将这些夹具（）值保存为设计变量，以简化其应用程序。 （但是您不想通过节省每一分钟的细节来填写变量管理器。）

现在应用这些值很容易。

保存后，每个设备都会自动适应屏幕尺寸，以使您的英雄部分在每个设备上都有完美的第一印象。

使用夹具（）设计像素完美的布局，而无需编写一行代码

Clamp（）可帮助您设计流体，响应式布局，而无需依赖无尽的媒体查询。使用Divi 5，您无需编写单行代码即可使用它。无论您喜欢编码还是享受视觉设计，Divi的高级单元都可以使夹具（）在字体上涂抹和间距更容易。

有了诸如Clamp（）之类的强大功能，因此您不想自己尝试Divi 5吗？测试不同的值，创建自己的响应式系统，并查看布局的灵活性。当您拥有喜欢的夹具（）技巧时，请在下面的评论中分享！我们很想看看您创造的东西。