绝对和相对CSS单元之间的区别

选择合适的CSS单元不仅仅是技术细节。这就是帮助您的设计在所有设备上保持一致，灵活和响应迅速的原因。像素似乎是一个简单的选择，但是它们在不同的屏幕上并不总是可以预见的。

在这篇文章中，我们将解释绝对单位和相对单位之间的区别，并展示Divi 5从一开始就可以更有效地使用它们。

CSS单元解释了：为什么它们对您的网站很重要？

CSS单元控制网站上所有内容的大小。选择错误，您的设计在不同的设备上断开。

大多数人使用像素是因为它们很简单且易于理解。但是像素自然不能很好地适应响应式设计。他们需要媒体查询或CSS功能（例如Clamp（））来响应屏幕更改。

其他单位会自动调整。视口单元用浏览器窗口扩展。像EM大小这样的相对单元基于周围的文本。不同的单位解决了不同的问题。选择好，您的设计在没有额外工作的情况下适应各种设备。

分解绝对单元：当固定尺寸效果最好时

绝对单位保持相同的大小，无论周围发生什么情况。如果将某些东西设置为20像素宽，无论有人在手机上查看还是大量的桌面显示器，它都保持20像素。该值永远不会根据屏幕大小，父元素或浏览器设置而更改。

像素（PX）统治这个空间。存在其他绝对单元，例如厘米，毫米和英寸，但它们属于物理测量很重要的印刷设计。对于Web设计，像素几乎可以处理您需要的所有绝对测量。

为什么像素可以很好地用于小细节

一些设计元素需要精确控制。 1像素边框应在任何地方看起来清脆且稀薄。掉落的阴影需要精度才能正确。当小图标在设备之间保持一致时，它们会更好。

像素在这些微小的细节方面非常出色。您的按钮边框应精确2像素厚，微妙的阴影应该正好是4像素偏移，并且导航图标应恰好是24像素正方形，以便完美对齐。

这些测量不需要随屏幕尺寸扩展。桌面上的1像素的边框应在移动设备上保持1像素。使其在移动设备上的2像素看起来又厚又笨拙。

其他元素也可以与像素合作。品牌徽标通常使用像素来获得品牌一致性。小型装饰元素（例如点或线条）需要精确尺寸。加载旋转器和进度条可以在固定尺寸上更好地工作。

使像素响应媒体查询

像素不是完全刚性的。媒体查询可让您在各种屏幕尺寸上交换不同的像素值。您的标题可能会在桌面上使用32像素文本，然后在平板电脑上跳至28像素，手机上的24个像素。

这种方法比相对单位多得多。您需要定义断点并为每个屏幕大小编写单独的规则，但是您可以完全控制每个尺寸的外观。

当您希望在每个屏幕尺寸下进行特定控件时，此方法效果很好。您可以准确地确定在手机上与平板电脑相对于桌面的文字在特定维度上的外观。不足为奇。

对于需要精确尺寸的元素来说，额外的CSS值得。当徽标适合每个设备的尺寸完全合适时，它们看起来最好。导航元素通常需要特定的维度才能正常工作。装饰边界和阴影取决于确切的测量值，以使其看起来清脆。

了解相对单元：灵活的网页设计方法

相反，相对单元根据周围的东西伸展和收缩。这种灵活性使网站跨手机，平板电脑和计算机不破坏。与保持固定的绝对单元不同，相对单元适合屏幕尺寸，父元素或用户偏好。

这些单元解决了像素引起的问题。您的75像素范围的按钮在桌面上正常工作，但在移动设备上占主导地位。相对单位会自动调整，从而使您无法为每个屏幕尺寸编写单独的样式。

EM单位如何相互构建

EM单位相对于其直接父元素的字体大小。如果您的基本字体尺寸为16px，并且将容器设置为字体大小：1.25EM，则将变为20px。它内部设置为1.5em的子元素现在将为30px（1.5×20px），而不是24px，因为它基于父，而不是root。

这种复合效果对于围绕文本的可扩展间距具有强大的功能。但是，如果您保持具有基于EM的字体大小的嵌套元素，则您的值可以迅速增加。 EM单元最适合与附近文本紧密绑定的填充，边距或元素。要在整个布局中进行一致的尺寸，请考虑使用REM。

REM单元保持简单

REM总是查看根HTML元素。将某些内容设置为2REM，并且页面上到处都是相同的大小。

大多数浏览器默认为16px。因此，1REM = 16px，2REM = 32px。更改根大小，并将所有基于REM的秤一起使用。

视口单元跟随您的屏幕

视口单元用浏览器窗口扩展。 50VW =屏幕宽度的一半，100VH =全屏高度。这非常适合填充屏幕的英雄部分。

移动浏览器通常在视口单元方面表现不佳。地址栏隐藏并显示何时滚动，当地址栏出现时，您的100VH部分可能会被切断。

VMIN和VMAX比较屏幕的宽度和高度，然后选择一个。 Vmin使用以较小的方式使用。在直立的手机上，宽度较小，因此50Vmin =宽度的50％。旋转到景观，高度变小，因此50Vmin切换到高度的50％。 Vmax做的相反：它总是选择更大的维度。这对于需要通过更大的测量来扩展的要素很有用。

适应容器的百分比

基于百分比的宽度始终与父元素的宽度有关。高度百分比可以以相同的方式缩放，但前提是父母具有定义的高度；否则，它们可能无法按预期工作。

填充和保证金百分比始终是根据父宽度计算的，即使对于顶部和底部值也是如此。这使得创建一致的间距和比例布局成为可能，尤其是在流体设计中。

区别

绝对单位就像一个刚性统治者，而相对单位的行为更像是测量胶带。两者都衡量事物，但是当条件变化时，它们的反应非常不同。他们比较以下方式：

大多数开发人员最终都使用了两者：用于需要保持清晰的小东西的像素，以及需要弯曲的大型结构件的相对单位。

为您的设计选择合适的单元

您网站的不同部分需要不同的方法。有些元素到处都保持相同的尺寸，而另一些元素根据屏幕尺寸或用户设置进行调整。大多数开发人员都想到了这一点。有一种更简单的方式：将单元与您想要的元素做的事情匹配。

首先考虑您的用户

人们以意想不到的方式浏览您的网站。有人在电话上访问。您的文字看起来很小，所以它们捏住了变焦。如果您使用REM单元构建，则一切都会成比例地生长。如果您到处都使用像素，那么事情就会开始重叠和破裂。

主要导航需要跨页的一致尺寸。 REM单元将其绑定到您的基本字体尺寸。您的徽标需要确切的尺寸才能获得品牌一致性。像素使其保持清晰。

许多用户更改其浏览器的默认字体大小，以提高可读性。当您的硬码像素时，您会忽略它们的偏好。如果有人放大到125％，您的基于像素的布局会崩溃。相对单位自动调整。

快速选择合适的单元

这是分解您的选择而不会迷失细节的方法：

• 文本和周围的间距：使用EM或REM。按钮填充尺度具有文本大小。利润与标题成正比。
• 与屏幕相关的元素：使用视口单元。填充大多数屏幕的英雄部分。获得特定屏幕百分比的侧边栏。
• 需要精确控制的元素：使用像素。保持酥脆的薄边界。具有完美对齐的小图标。用精确的偏移掉落阴影。
• 基于容器的元素：使用百分比。适应父母的灵活网格。与容器相扩展的图像。

启动简单。使用像素进行装饰钻头，REM用于文本和相关间距，用于屏幕尺寸的截面的视口单元以及灵活容器的百分比。选择相关元素的系统并坚持下去。

常见的CSS单位错误以避免

您选择所有像素，因为它们感到安全。您的按钮在笔记本电脑上的75像素宽度上看起来很完美。然后有人在手机上打开您的网站，并且同一个按钮吃了一半的屏幕。您的徽标需要确切的尺寸，但是您的内容区域需要灵活性。随机混合这些方法，然后创造混乱。因此，这里有一些有关避免标准CSS单元错误的提示：

1。为所有内容挑选像素

像素感到安全，因为20个像素意味着20个像素。简单，对吗？您的300像素范围的侧边栏在桌面上正常工作。在移动设备上，它变成了一个巨大的块，将您的内容粉碎成细条。您的16像素文本在高密度屏幕上变得不可读。

当某人增加浏览器的字体尺寸时，您的基于像素的布局就无法适应。文本溢出容器。按钮消失在其他元素后面。您的侧边栏崩溃了您的主要内容。

将像素保存为真正需要精确控制的事物：薄边界，小图标和掉落阴影。对于其他所有内容，请尝试使用相对单位。

2. EM单位失控的单位

EM单位根据父母的字体大小扩展。这听起来很灵活，直到您开始筑巢为止。假设您的容器使用1.2EM，并且内部的标题使用1.5em。由于1.2×1.5 = 1.8，该标题变为1.8em。保持筑巢，大小可以滚雪球。更改一个母体字体大小，并在下游变化。

REM单元修复此问题。它们总是引用根元素，因此2REM无论使用何处而表示相同的东西。这使您的版式更容易扩展和控制。

3。在移动设备上跳来跳去的视口单元

将您的英雄部分设置为100VH，并且完美地填充了屏幕。滚动时，除了移动浏览器隐藏并显示其地址栏。 Android上的iOS和Chrome上的Safari都这样做。当地址栏消失时，您的100VH部分突然变得太高了。当它重新出现时，您的内容将被切断。

较新的DVH单元适应了不断变化的视口尺寸。不过，浏览器支持仍在追赶。作为后备，使用CSS自定义属性的JavaScript解决方案有效。

用固定尺寸破坏可访问性

用户通常会调整其浏览器的默认字体大小以提高可读性。当您使用固定像素的硬码文本，按钮和间距时，您的布局可能会破坏 - 文本可能会溢出，按钮可能变得无法使用，关键元素可能会在更高的缩放级别下消失。

根据WCAG和Apple的标准，建议将触摸目标至少为44×44 CSS像素。对于有运动障碍的用户来说，较小的目标可能会具有挑战性。

而不是使用固定尺寸锁定，而是使用可扩展单元（例如REM）创建尊重用户首选项的布局。将基本字体尺寸设置在元素上，然后将标题，按钮和间距始终如一，并在网站上使用相对单元。

5。高密度屏幕上的微小文字

不同的设备对像素的包装不同。当您的显示器的屏幕上有100个时，手机的屏幕可能具有每英寸400像素。相同的像素计数在每个设备上看起来完全不同。

您的14像素文本在桌面显示器上看起来不错。在高密度的电话屏幕上，相同的14个像素变成显微镜。用户斜视和捏缩放。

当您使用相对单位时，操作系统和浏览器会自动处理缩放。您的1REM文本在高密度屏幕上变大，在低密度屏幕上变小。

6。没有计划的混合单元

您将REM用于某些标题，将EM用于其他标题，而Pixels则用于身体文本。您的设计缺乏节奏，因为不同的元素比例不同。选择相关元素的系统。如果您的标题使用REM，则所有标题都应使用REM。如果您的间距使用EM，请继续使用EM进行相关间距。

跨设备和用户设置测试您的选择。当某人增加字体尺寸时，请检查您的设计外观。几分钟的测试可节省数小时的错误修复。

Divi 5的高级单位如何简化CSS管理

用CSS单元摔跤会很快变老。您花费数小时调整值，在不同的设备上进行测试以及修复破碎的布局。 Divi 5完全改变了这一点。新系统将猜测从单位选择中取出，并为您提供对响应行为的视觉控制，而无需接触代码。但是首先，让我们了解Divi是什么。

什么是Divi？

Divi是一个网站构建器，它将WordPress变成了希望自己的网站看起来不错的人们实际上有意义的东西。

在您的页面上拖动200多个模块中的任何一个。将文本正确地更改为位置。选择新的颜色并立即观看它们。您正在研究真实的事情，而不是对您的预览模式。

主题包括2000多个不吮吸的布局。针对餐馆，摄影师，顾问和其他数十家业务的真实设计。找到您喜欢的一个并调整它，直到感觉正确。

主题构建器可让您控制所有内容。创建看起来不通用的标题，构建出色的博客页面，并将您的404页变成人们实际可能想要看到的内容。

使用AI建立网站

Divi AI在您的设计区域内工作。需要文字吗？它写了。

想要图像吗？它使他们。您甚至可以描述照片编辑，并且可以处理工作。

同样，对于代码和新部分。

Divi快速站点解决了当您凝视空白页面而没有任何线索的空白页面时，就解决了这一可怕的时刻。从我们的团队实际设计的初学者站点中进行选择，并配有原始图像和艺术品。

或将您的业务描述为Divi快速站点 + Divi AI，并让其从头开始构建一些东西。

这些AI构建的网站将具有与您讲述的内容相匹配的真实标题，复制和图像。用AI生成所有内容，从Unsplash中获取照片，或者丢下占位符。首先设置字体和颜色，然后让AI围绕它们工作。您仍然可以编辑所有内容。

Divi 5中的新功能

Divi 5从头开始重建一切。我们取消了旧的短码系统，并构建了与当今网络标准更好的功能。站点加载更快，编辑器响应更快，您可以访问以前不可能的工具。

但是有什么新功能？看看：

Flexbox布局系统

现在，在Divi中建立现代响应迅速的网站现在更快，更直观。我们已经在Divi 5中引入了一个完整的Flexbox布局系统，为您提供了简单的控制垂直对齐，内容包装和间距的控件。创建所需的确切布局，而无需与代码战斗或使用复杂的解决方法。

选项组预设

选项组预设可让您保存可以在任何地方混合和匹配的样式。做一次阴影样式，然后将其用于按钮，卡片，部分等。更新预设，并在整个网站上立即发生变化。

设计变量

品牌颜色，字体和间距现在都生活在一个地方。您可以通过编辑一个变量来从蓝色切换到绿色。您的整个网站会自动更新，因此您不必通过数十个模块进行狩猎。

高级单位

现在，您可以使用所有具有Divi 5的高级CSS单元：从PX到VW/VH。 CSS功能现在在构建器中也可以正常工作。想要一个屏幕高度的80％的部分减去标头吗？键入calc（80VH - 100px），您将设置。该界面处理clamp（），min（），max（）：所有这些响应技巧。

嵌套行

行现在最深入的行列，排在其他行。建立复杂的杂志布局或详细的产品页面，而无需与结构进行战斗。每个级别都可以完全控制间距和设备行为。

一单击编辑

点并单击页面上的任何地方以开始编辑。在我们身后搜索微型编辑按钮或通过多个菜单导航的日子。

可自定义的断点

Divi 5的可自定义断点可以使您启用七个不同的屏幕尺寸。无论是大型监视器的1200px，平板电脑的900px，还是手机的650px。

多面板工作区

根据需要安排工作区面板。保持多个设置面板同时打开，而不是在不同的接口区域之间不断跳跃。

属性管理

以手术精度在网站的不同部分之间复制特定元素。仅从一个元素中抓取间距，只是从另一个元素中抓取颜色，或者只是第三个元素的预设。不再有全部或全无的转移。

画布缩放

调整工作区尺寸，以预览您的网站在不同设备上的显示方式。请参阅移动，平板电脑和桌面视图，而无需切换到单独的预览模式。

绩效改进

现在一切都感觉更狡猾。页面更快地加载，构建器响应速度更快，复杂的布局不会像以前那样陷入界面。

模块组

将多个模块捆绑到一个容器中。将文本块，图像和按钮视为一个单元。将它们一起移动，将它们造型，然后将整个内容复制到其他页面。

HSL颜色系统

建立具有色调，饱和度和轻度控制的配色方案。创建品牌颜色变化，看起来专业。该数学会自动创建令人愉悦的组合。

还有更多...

• 循环构建器：构建模板，用于重复博客网格或产品列表等内容。设计一次，让系统填充您的实际内容。
• WooCommerce模块：用于产品网格，单个产品页面和购物车功能的特定于商店的模块。在线商店需要的一切都需要专门用于销售。

在Divi 5中使用CSS变量

当您需要在多个元素之间保持一致的值时，网站样式变得乏味。 CSS变量通过将可重复使用的值存储在一个位置中来解决此问题。 Divi 5支持传统的CSS变量及其自己的设计变量系统，从而使您在管理网站的外观方面具有灵活性。

Divi 5直接在其输入字段中接受任何CSS单元。写REM，VW或您以前只能使用像素的百分比值。构建器立即处理这些单元，而无需其他设置。

CSS功能以相同的方式工作。输入流体版式或最小值（500px，90％）的夹具（1REM，4VW，3REM）以进行响应宽度。当您设计时，视觉构建器会实时处理这些计算。

变量与此系统无缝集成。定义一个CSS变量，例如–header-Height：80px，然后使用任何字段中的VAR（–header-Height）引用它。 Divi识别语法并自动应用您的存储值。

这种直接集成意味着您可以在同一项目中混合传统单元，现代CSS功能和变量。使用像素进行边界，视口单元进行部分，以及用于重复测量的变量。

设计变量：应用高级单元的更好方法

设计变量是Divi 5的CSS变量内置替代方案。它们完全通过视觉界面工作，而无需任何代码知识。您使用Divi的变量管理器面板创建和管理这些变量。

这些变量超出了简单的数字和颜色。存储完整的图像URL，文本内容或复杂的样式值。当您更新设计变量时，使用它的每个元素都会立即在整个网站上发生变化。

Divi 5提供了几种可满足不同内容需求的可变类型：

• 颜色变量存储十六进制代码，渐变，品牌颜色，文本颜色，背景和边界。
• 字体变量在全球管理主题定制器的限制之外管理排版，并为任何文本领域工作。
• 数字变量接受任何CSS单元加上CSS功能，例如clamp（），calc（），min（）和max（）用于间距，大小和动画。
• 图像变量存储可重复使用的图像，例如徽标，背景和图案。
• 文本变量存储可重复使用的文本字符串，例如联系信息，标语和业务详细信息。
• URL变量存储可重复使用的链接，用于社交媒体，分支机构，促销和TEL/MAILTO链接。

设置具有数字设计变量的CSS单元

数字变量为您提供了保持一致的设计的构建块。当您重复不同元素的相同测量时，它们的效果最佳。另外，它们比使用CSS代码摔跤要简单得多。

在Divi界面中找到变量管理器。创建一个新的数字变量，并为其提供适合您设计的值。使用清晰的名称，例如“纽扣填充”或“截面差距”，而不是模糊的标签。

创建您的变量库

您可以添加常见变量，例如：

• 3REM的“按钮高” - 具有文本大小的按钮比例
• 8VH时的“划分” - 间距适应屏幕高度
• 0.5REM的“边境 - 拉迪乌斯” - 圆角保持比例
• 75VH的“英雄高” - 英雄部分填满了大多数屏幕
• 1px的“罚款” - 酥脆线保持清晰
• 夹具（1REM，2.5VW，2REM）的“流体文本” - 文本平稳缩放
• 最低的“内容宽度”（90％，1200px） - 容器保持可读
• 计算（2REM + 2VW）的“动态差距” - 间隔随屏幕尺寸而增长

将它们应用于模块，部分或行设置中。

您的REM变量尺寸为文本大小。 VH单元适应较小的屏幕。带有夹具（）的变量会自动调整最小值和最大值之间。

建筑物连接的预设

用变量对元素进行造型后，将间距保存为选项组预设。现在，此预设具有对您的数字变量的参考。

当您将此预设应用于其他模块时，它们继承了相同的基于变量的间距。在变量管理器中将“卡片填充”从2REM更新为3REM，并且使用预设自动更新的每个元素。

预设保持不变，但是值会改变。这适用于所有设计变量：颜色，字体，图像，文本和URL。您的预设变得动态而不是静态，从而使网站范围内的更新成为可能。

使用CSS单元和Divi 5建立更好的网站

使CSS单元正确改变您的构建网站的方式。您将修复较少的破碎布局，并创建跨设备的设计。像素指甲精确细节。相对单位适应不同的屏幕和用户偏好。

Divi 5使使用高级CSS单元的建筑轻而易举。将任何单元键入构建器，并立即查看结果。设计变量使您的网站保持一致。更改一个值，所有连接的所有内容都会自动更新。

您的网站应该比断点战和无尽的布局修复更好。尝试Divi 5，观看CSS单元将令人沮丧的设计会话变成平滑的工作流程。