了解CSS单元（以及如何使用它们）

您可能以前可能在Web代码中看到过各种CSS单元，但是了解它们的工作方式使您可以更故意使用它们。在这篇文章中，您将了解CSS单元的确是什么，它们如何影响您的布局以及如何在Divi 5中使用它们，可以帮助您更响应地设计。

Divi 5将本地对CSS单位的支持就直接进入建筑商。多亏了新的高级单元功能，您无需自定义代码即可使用％，EM，REM，VW等。

什么是CSS单元？

CSS单元告诉浏览器应该有多大或小的东西。无论您是设置标题的大小，部分的宽度还是元素之间的间距，您都使用单元来定义该空间。没有它们，浏览器就不知道该如何处理您的价值观。

例如，写作宽度：100对浏览器没有任何意义。但是，添加一个单元，例如100px或100％，现在它确切知道您想要什么。

以四个框以此示例为例，每个框都使用不同的CSS值：

• 第一个使用宽度：100。技术上无效，但许多浏览器将其呈现为100％。
• 第二个（100px）使用固定宽度。
• 相对于母容器，第三和第四（100％和60％）比例比例。

您可能会想知道为什么第一个具有宽度的盒子：100在技术上无效，即使它仍然出现全宽。

宽度：100被浏览器忽略，因为它缺少单元。但是在这种情况下，盒子仍然在容器上伸展，不是因为CSS被接受，而是因为像Div这样的块级元素自然地默认情况下跨越了父母的全部宽度。这是默认行为的巧合，而不是无效CSS被解释为100％的结果。

流行的CSS单元

尽管PX和％通常出现，但一旦您知道何时使用它们，许多其他人同样有用：

从设置字体尺寸，定义截面宽度，调整填充和边距以及构建灵活的网格布局，您将在Web设计中看到这些单元。它们是布局外观和行为方式上最重要的决定因素之一。在使用哪些单元在有效设计中更重要的地方，我们将尽快完成。

但是首先，知道所有CSS单元都属于两种主要类型是有帮助的：绝对和相对。

绝对和相对单位

如果您希望布局在不同的屏幕尺寸上良好工作，那么了解差异至关重要。

绝对单位

绝对单位具有固定值。这意味着，当您将某些东西设置为100px时，无论用户在手机，平板电脑还是大型桌面显示器上，它始终将宽100像素。这些单元无法响应屏幕尺寸或周围布局，这使得它们在需要精确控制时很棒。

它们通常用于边界，图标尺寸或固定的盒子阴影，通常在精确度更重要的情况下比灵活性更重要。

但是同样的精度可能会引起问题。在大屏幕上看起来很完美的设计可能会溢出，笨拙或在较小的设备上完全断裂。由于绝对单位无法适应，除非仔细使用，否则它们可以使您的布局感觉僵硬。

相对单位

顾名思义，这些基于周围环境进行调整。它们没有将锁定到特定的尺寸，而是根据上下文（父元素，视口等）进行扩展。这使它们更加灵活地进行响应设计。

一些单元响应父元素的大小，而另一些单位则对页面的根字体大小响应，有些甚至对浏览器窗口本身反应。这是一些关键的：

• ％用父容器缩放。
• EM根据父元素的字体大小进行调整。
• REM遵循页面的根字体大小。
• 大众和VH响应浏览器视口的宽度和高度。

由于它们适应了不同的环境，因此这些单元可帮助您构建在任何屏幕上感觉自然的布局。它们会随着给出的空间扩展或缩小，这使您的内容可读，并且您的设计在跨设备之间保持平衡。

让我们看一个快速的例子，看看为什么这种灵活性很重要。假设您正在构建图像部分，并将其宽度设置为1200px。

这在大型显示器上看起来可能是完美的，但是在屏幕宽度为768像素的平板电脑上，图像可能会溢出并看起来很奇怪。现在尝试使用：

width: 100%;

这告诉浏览器使图像填充其容器的宽度。屏幕是宽还是狭窄，图像会自动调整。

使用相对单元的真正好处是响应能力。您不仅要分配一个尺寸，而且还为浏览器提供了有关布局在不同情况下应如何行为的明确说明。而且，当您正确处理时，您的内容适合每个屏幕。

通过使用有意义的相对单元，您可以避免使用严格的布局，减少断点的需求，并使设计更易于管理。使用Divi，您不必编写单行代码来使用不同的CSS单元。在构建器中选择您想要的单元，然后查看您的布局实时响应。

何时使用CSS单元

现在，您了解了绝对单位和相对单位之间的区别，下一步是知道何时使用每个。

通常，当您的布局需要适应不同的屏幕尺寸时，请使用相对单元。这些非常适合截面宽度，版式，元素之间的间距或整页布局。因为它们会自动扩展，所以它们可以帮助您保持一致性，而无需为每个设备创建单独的样式。

另一方面，当您希望某些东西保持不变时，绝对单位将会有所帮助。想想边界，图标，固定间距或小视觉细节。

这里有一些指导您选择的示例：

• 当您需要精确控制时，请使用PX，例如图标尺寸。由于它没有适应，因此请避免使用布局宽度或文本。
• 当您希望元素与其容器扩展时，请使用％。
• 当您希望间距与父元素的字体大小扩展时，请使用EM。
• 如果您想在网站上进行一致的尺寸，请使用REM （通常称为root em） 。由于它基于根字体的大小，因此可以保持间距和排版可预测。
• 使用大众和VH进行全屏部分，英雄区域或直接响应视口的间距（设备屏幕的整个视图）。

对于更高级的控制，您还可以使用CSS功能组合单元。当混合1REM + 5VW之类的值以最小基础响应间距等值时，Calc（）很方便。 Clamp（）是设置在极限之间生长或收缩的流体值的理想选择，使其成为媒体查询的更干净的替代品。

最后，选择合适的单元涉及考虑每个元素在不同情况下应如何行为并选择最能实现这一目标的单元。

Divi的高级单位，无需编码即可构建响应性

我们已经看到了CSS单元如何控制布局行为。 Divi 5采用该控制权，并毫不费力地与高级单位一起使用。

订阅我们的YouTube频道

有了直接在构建器中构建的对％，EM，REM，VW和VH的本机支持，您可以将实际CSS值应用于模块，部分，间距和排版，而无需打开代码面板。在任何数值字段中，只需从高级单元下拉列表中选择您的首选单元，调整值，然后查看更改。

而且它不止于此。 Divi还允许您在Visual Builder中使用Calc（）和Clamp（）等高级CSS函数。这意味着您可以创建具有相同精度开发人员的流体值，混合单元和微调布局，但在视觉上可以从手写的CSS中获得。

需要一个字体尺寸，以在不同的屏幕尺寸上流畅地缩放？使用夹具（）。是否想用固定和柔性值的混合物来抵消间距？尝试calc（）。 Divi立即明显地处理所有操作。

您不再猜测或在设计和代码之间进行切换。 Divi为您提供了视觉能力和即时反馈，以使响应逻辑正确，并完全控制您的元素如何扩展和跨设备的表现。

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

CSS单元与Divi的高级工作流程完美同步

您已经看到Divi如何在建设者内部轻松使用单个CSS单元。但是，真正的优势表明，这些单元何时在整个网站上一起工作。这就是设计变量，选项组预设以及高级CSS功能之类的功能，例如Calc（）和Clamp（）确实发光。

Divi不仅让您将CSS单元输入到字段中。它可以帮助您在不编写代码的情况下将它们集成到整个设计系统中。一切都保持一致，可扩展且易于维护。

让我们看看Divi如何帮助您使用CSS单元作为灵活的，逻辑驱动的工作流程的一部分：

1。使用设计变量创建布局逻辑

节省任何项目时间的最简单方法之一是预先计划您的布局逻辑。您没有在多个位置调整相同的间距或字体大小，而是使用Divi的设计变量来定义这些值并在整个设计中重复使用。

您可以使用2REM，5VW或什至诸如calc（2REM + 1VW）之类的真实CSS单元（例如2REM，5VW），创建可重复使用的值，例如–Card-Padding或–section-GAP。设置后，这些值可以在模块，行和各节上应用，以保持所有内容一致。

您只需要在以后更改时更新变量。这种变化反映了所使用的任何地方，可以为您节省寻找各个设置的来回。而且，由于CSS单元是直接构建到Divi系统中的，因此您不依赖猜测，而是在视觉上应用真实的CSS逻辑。这使您的布局更易于管理，可扩展和易于调整，随着项目的增长。

2。在视觉上使用clamp（）和calc（）

CSS功能诸如Clamp（）和Calc（）之类的功能可帮助您构建响应式布局。它们让您定义灵活值，这些值在跨屏幕尺寸的情况下调整了媒体查询。因此，您可以编写像夹具（1REM，2VW，2.5REM）一样编写逻辑的固定尺寸，以使浏览器在设定限制之间平稳缩放。或使用计算（100VH - 80px）根据您的视口高度调整英雄部分。

通常，他们需要手动编写CSS。在Divi中，您可以直接输入任何数字字段。

而且，由于CSS单元在两个功能中都受到支持，因此您可以混合REM，VW和PX等值以获得所需的行为。您会在键入时看到结果实现，这使得可以轻松进行实验和响应能力，而无需离开构建器。

3。保存单位逻辑，并带有选项组预设

使用高级单元或公式设置布局后，您就不必再次重建它们。 Divi允许您保存样式逻辑，包括填充：夹具（1REM，3VW，2REM）作为选项组预设。

这意味着下次您需要相同的间距或布局模式时，您不应用相同的设置，而仅应用保存的预设。

而且，如果您使用预设内部的设计变量，那就更好了。您可以轻松地创建一个相互联系的系统，其中修改整个网站的样式仅取决于一件事：更改变量。

在Divi中，使用CSS单元不仅仅是大小；这是关于行为的。您设置的每个值都成为可视化，缩放和在布局中保持一致的视觉系统的一部分。而且由于所有这些都内置在构建器中，所以感觉不像编码，而是使用逻辑设计。

Divi将CSS单元变成视觉超级大国

您无需编写CSS即可使用CSS单元。 Divi 5将它们全部带入了一个视觉界面，您可以在其中实时探索，应用和预览。无论您是调整间距，构建流体排版还是使用变量和预设创建布局逻辑，Divi都可以在视觉上完成所有操作。

准备尝试了吗？下载Divi 5并开始在设计中使用真实的CSS单元。