关于Divi 5的高级单位，您需要了解的一切

出色的设计工具可以控制网站的各个方面。无论是钉完美的填充物还是确保文本在设备之间完美缩放，每个细节都很重要。 Divi多年来一直是设计师的可信赖伴侣，为建立专业网站提供了坚实的基础。 Divi 5将其进一步推出，引入了一个称为高级单元的功能。

Divi 5中的高级单位有助于改善您构建网站的方式。从Calc（）的动态计算到Clamp（）的流体缩放，例如大众和REM等CSS单元，以及CSS变量的灵活性。在这篇文章中，我们将深入研究高级单元，如何在视觉构建器中使用它们，以及为什么每个Divi用户都需要它们。无论您是微调布局还是梦想大胆的新设计，高级单元都可以更好地控制设计的响应能力。

让我们潜水。

Divi 5中的高级单位是什么？

Divi 5中的高级单元可以通过其多功能单元字段来控制设计元素。这是一个功能强大的输入字段，可以接受CSS单元，函数和变量的完整范围。

视觉构建器的一个很小的变化，它支持所有CSS单元，并为适合容器，unset，calc（），clamp（）和CSS变量提供新的支持。

高级单位使您摆脱静态值的约束。您不必猜测固定的像素尺寸或与断点搏斗的固定大小，以使事情像您想要的那样适合。在不留下视觉构建器的情况下，您可以构建毫不费力地弯曲和扩展的布局 - 具有流体排版，自适应间距和视口意见设计。这不仅仅是更多选择；这是关于更智能，更可扩展的创造力。

探索Divi 5中的高级单位

Divi 5的高级单元功能提供了各种设计选项，每种选择都有独特的形式布局。让我们检查关键参与者，看看他们的工作方式。

Divi 5中的CSS单位

高级单元打开了CSS单元的完整调色板，远远超出了像素和百分比。以视口宽度（大众）为例 - 将部分的宽度设置为80VW ，它将始终占用视口宽度的80％（水平水平），从台式机到移动设备完美缩放。

root em（rem）与站点的根字体大小的尺寸 - 用于一致版式的想法，例如标题的4.5REM 。

您也可以尝试使用Fit-Content，该拟合体根据其内容大小。例如，使用fit-content进行标头宽度可以确保其完美适应。您可以连续添加适合宽度范围，以保持标头紧凑和成比例，避免过多的空间或溢出，同时保持抛光外观。

这些单元适应屏幕尺寸和上下文，给出了感觉活着而不是锁定到位的布局。

calc（）是动态计算器

CACL（）函数就像是内置在Divi中的迷你计算器。它使您可以将单位与操作（加法，减法，乘法和除法）混合，以获得动态结果。一个经典的例子是计算（100％ - 50px） ，它将部分的宽度设置为100％，并减去50像素。如果您的元素被集中对齐，则两侧的25px将减少。

您可以使用calc（）进行响应的间距，例如设置部分或行的宽度在每一侧都留下完美的沟槽。 Calc（）随着视口的变化而即时进行调整，确保您的设计保持平衡而无需进行手动调整。

用于流体控制的夹具（）

Clamp（）函数可帮助您控制尺寸，这些尺寸可以跨屏幕尺寸平稳调整。它使用三个值：最小尺寸，首选尺寸和最大尺寸。一个很好的例子是夹具（36px，4vw，48px） 。

这意味着尺寸始于36px，基于4％的视口宽度增加，但从未超过48px。它非常适合文本，就像一个标题模块，在小型手机和大屏幕上看起来都不错。无论设备如何，Clamp（）确保您的设计保持平衡且可读。

CSS变量用于全球灵活性

CSS变量（或自定义属性）让您定义可重复使用的值，例如–font-size：5em ，在Divi的主题选项或页面设置CSS字段中。在Divi 5中添加CSS变量时，请确保将它们包装在父母元素中：

:root {
--font-size:5em;
}

定义后，您可以将var（–font-size）放入标题的文本大小字段中以应用它。

这是一个节省时间，可以使您的设计一致且可以随时进行。

无单位值

Divi 5的高级单元还包括初始，Unsot和自动值。初始属性将CSS属性重置为CSS规范定义的默认值。例如，设置颜色：段落上的初始内容将其恢复为黑色，忽略任何自定义或继承的样式。未设置将属性清除回到其自然状态，其作用类似于非属性属性的初始状态，或在适用时恢复为继承的值。同时， Auto可以让浏览器根据上下文决定一个值，例如部分的高度伸展以适合其内容。

高级单位在Divi 5中的工作方式

Divi 5中的高级单元将新的控制水平直接带入了视觉构建器，从而易于创建响应迅速的动态设计。您可以立即输入任何CSS单元，功能或变量（例如VW，Calc（）或Clamp（）），并查看结果。这是高级单位在Divi中的工作方式。

calc（）的响应式部分宽度

假设您想要一个占用视口高80％的部分，但可以从顶部和底部删除一些填充物。导航到该部分的设计选项卡，找到高度字段，然后将Calc（80VH - 60px）添加到该字段中。

该计算允许该部分用视口加流畅，从而维持观看端口高度的80％，同时从顶部和底部减去30px。

用夹具（）的流体版式

如果您需要随屏幕尺寸但可读的标题，Clamp（）可能会很有用。在标题模块的设计选项卡中，将标题文本大小设置为夹具（52px，2vw，36px） 。

这将文本设置为52px，根据2％的视口宽度来扩展，并将大小限制为36px - 毫不费力地提供了响应良好的平衡版式。

可变驱动的字体大小

Divi 5的CSS变量是在间距，文本和其他领域获得统一性的好方法。您可以将变量设置一次，然后通过将它们添加到模块，列，行或部分单位字段中，在整个设计中重复使用它们。例如，假设您需要一致的标题大小，而无需手动设置它们或使用选项组预设来定义它们。

您可以在主题选项或页面设置中添加以下内容，在高级>自定义CSS下：

:root{
--text-size-h1: 86px;
--text-size-h2: 60px;
--text-size-h3: 48px;
--text-size-h4: 36px;
--text-size-h5: 28px;
--text-size-h6: 20px;
}

从那里，只需在任何标题模块中的标题文本大小添加一个变量即可。例如，对于我们的英雄部分，我们只需添加var（–text-size-h1）即可。 Divi将其识别为变量，并将适当的样式分配给您的标题。

高级单位的最佳实践

为了充分利用Divi 5中的高级单位，周到的方法可以节省时间并确保您的设计闪耀。以下是一些指导您的最佳实践：

启动简单

如果您不熟悉CSS功能和变量，请轻松使用像素（PX）或百分比（％）等熟悉的单元，然后尝试Calc（）进行基本动态调整。例如，在潜入夹具（）或CSS变量之前，请尝试calc（100％ - 40px）的截面宽度。这会建立信心，而不会尽早压倒您。

利用常见样式的变量

在主题选项中定义CSS变量，以确定网站范围的一致性。例如，设置–gutter：30px使您可以在各节，行和模块之间重复使用该间距。 CSS变量也可以为所有标题设置均匀的文本大小。一项编辑更新了所有内容，加快了设计过程并保持设计凝聚力。

测试响应能力

Divi的响应视图系统是跨多个屏幕尺寸设计设计的好方法。在应用大众或夹具（）之类的单元之后，在台式机，平板电脑和移动视图之间切换，以确保您的布局顺利进行。夹具（20px，3vw，40px）的标题可能在台式机上看起来很完美，但可能需要对较小的屏幕进行调整，因此请确保它进行测试。

不要太复杂

尽管您可以嵌套功能，例如Calc（夹具（20px，5vw，50px） - 10px），但至少在学习时，您应该坚持简单的公式。过度的复杂性可以减慢性能，并在事情不像应有的情况下更加严重地进行故障排除。坚持清洁，有目的的计算，以使生活更轻松。

为什么高级单位提升Divi 5

高级单元非常适合简化设计过程。这是此新功能带来的一些关键优势：

• Creative Freedom：混合单元，功能和变量解锁布局，这些布局更加耗时，可以在以前的Divi版本中实现。简单的公式使您可以调整高度，宽度，字体尺寸等。这种灵活性使您可以在视觉构建器中更快地构建和更快地执行。
• 更好的响应式设计：高级单元将Divi转向毫不费力地适应的流体设计。使用大众或夹具（）可确保您的网站在任何设备上都具有自然的感觉，从而减少了手动覆盖的需求并提供精美的体验。
• 它是防前的：高级单元与Divi 5的使命保持现代化的视觉构建器的使命。通过拥抱CSS的全部力量，Divi 5可以为您提供建立现代网站所需的工具。这不仅是要跟上；这是要使用反映专业开发人员使用的工具来保持领先地位。

下载最新的Divi 5 Alpha

高级单元是一个有用的功能，最近已添加到Divi 5。无论您是使用Divi多年还是刚刚发现它，都可以减少努力构建响应迅速的动态网站。

准备自己看吗？立即下载Divi 5 Alpha，然后开始尝试高级单元。使用大众和VH进行视口间距，测试夹具（）以进行排版，或设置变量以重新考虑您的构建方式。这是一个进一步推动设计并发现可能的机会。