如何选择最好的 CSS 单元来创建更好的网站布局

CSS 单元是创建站点布局时要考虑的最基本方面之一。 这些单元将定义您的设计在各种设备上的交互方式。

但是当谈到 CSS 单位时，有很多选项可供选择，而且所有选项都不相同。 CSS 单元不仅限于字体，因此作为前端开发人员，您还应该了解这些单元如何影响布局。

在本文中，我们将向您展示不同 CSS 单元的工作原理，以便您可以使用它们来创建更好的布局和网站设计。

CSS 单元的类型

CSS 单元可以分为以下几类：

• 绝对单位
• 字体相关单位
• 视口相对单位

绝对单位

有些单位取决于某些绝对值，不受任何屏幕大小或字体的影响。 这些单位显示可能因不同的屏幕分辨率而异，因为它们取决于屏幕的 DPI（每英寸点数）。

这些单位是：

• px（像素）
• 以英寸来算）
• 厘米（厘米）
• mm（毫米）
• 电脑（皮卡）
• pt（点）

像素

像素是最常用和接受的单位。 它被认为是许多其他单位的测量基础。 它提供了各种设备之间最一致的结果。

以下示例中的box元素的高度为 150px，宽度为 150px，并且在所有屏幕尺寸上都保持不变。

[CSS]
。盒子{
高度：150px；
宽度：150px；
}
[/CSS]

所有其他绝对单位，如 in（英寸）、cm（厘米）和 mm（毫米）都是真实世界的测量单位，真实世界的 CSS 用例很少。

然而，了解它们与像素的关系仍然很好，所以这是它们的比较方式：

• 1 英寸 = 96 像素
• 1 厘米 = 37.8 像素
• 1 毫米 = 3.78 像素

而 pc（picas）和 pt（点）与英寸直接相关。

• 1 英寸 = 72 磅
• 1 英寸 = 6 件

所有绝对单位之间的关系可以这样证明：

雷姆

除了像素，所有其他绝对单位在屏幕 CSS 中几乎没有用例，但由于它们是真实世界的测量单位，它们可以有效地用于打印 CSS。 （如果你想知道像素，它们在打印 CSS 中也能正常工作！）

字体相关单位

有些单位取决于文档的字体大小或字体系列或其父级元素。 这包括以下单位：

• 时间
• 雷姆
• 前任
• 通道

Em

Em是相对长度单位； 它取决于父元素或文档的字体大小。 默认情况下，如果未定义font-size则1em等于16px 。

Em 从其直接父级的字体大小继承大小。 因此，如果父元素具有font-size:18px ，那么1em将被测量为其所有子元素的18px 。

这里我们有一个 div .post和三个孩子， .post-item ，有一个标题和一些文本。

[HTML]
<div class=”post”>
<div class=”post-item”>
<h2>标题</h2>
Lorem Ipsum 只是印刷和排版行业的虚拟文本。 自 1500 年代以来，Lorem Ipsum 一直是行业标准的虚拟文本
</div>
<div class=”post-item”>
<h2>标题</h2>
Lorem Ipsum 只是印刷和排版行业的虚拟文本。 自 1500 年代以来，Lorem Ipsum 一直是行业标准的虚拟文本
</div>
<div class=”post-item”>
<h2>标题</h2>
Lorem Ipsum 只是印刷和排版行业的虚拟文本。 自 1500 年代以来，Lorem Ipsum 一直是行业标准的虚拟文本
</div>
</div>
[/html]

现在父.post有一个font-size:20px和子元素.post div有它自己的font-size:1.2em和padding:0.75em和margin:0.75em ，所以计算出的 padding 和 margin 将是 18px (20px *1.2em*0.75em）。

[CSS]
HTML{
字体大小：20px；
}

。邮政{
字体大小：20px；
}

.post div{
字体大小：1.2em；
}

.post-item{
背景：粉色；
填充：0.75em；
保证金：0.75em；
}

.post-item h2{
字体大小：1.5em；
保证金：0.5em 0；
}

.post-item p{
保证金：0；
字体大小：1em；
}
[/CSS]

如您所见，子元素从父元素继承值。

使用 em 的好处是，如果您决定按比例更改每个元素的font-size 、 padding和margin ，那么您只需更改父元素的字体大小，所有其他元素都会相应调整。

对于像 px 这样的绝对单位，情况并非如此，您必须单独调整每个元素。

但是，如果嵌套元素在 em 中也有自己的font-size ，那么这种继承性质可能有点难以管理。

与前面的演示一样，如果您将标题和段落包装在其中一个子项的另一个div中，您会看到奇怪的结果。

[HTML]
<div class=”post-item”>
<分区>
<h2>标题</h2>
Lorem Ipsum 只是印刷和排版行业的虚拟文本。 自 1500 年代以来，Lorem Ipsum 一直是行业标准的虚拟文本
</div>
</div>
[/html]

因为post-item有一个嵌套的div ，基本大小将从 24px 变为 28.8px (20px*1.2em*1.2em)， h2的font-size和margin将变为 43.2px (20px*1.2em*1.2em) *1.5em) 和 14.4px (20px*1.2em*1.2em*0.5em)，分别。

雷姆

Rem 在这些类型的情况下非常有用，因为它们总是指代根元素的字体大小，而不是父元素。

如果您采用前面的示例并将.post div的单位从 em 更改为 rem，您将看到所有子元素自行修复。

[CSS]
.post div{
字体大小：1.2rem；
}
[/CSS]

一旦单位从 em 更改为 rem，它的基从父 div 更改为根元素，其具有front-size:20px 。

因此，计算将是 20px*1.2rem*value 并且h2和p都将具有一致的font-size和margin ，无论它们的父级如何。

前任

Ex 是相对于当前字体的 x 高度的，很少使用。 x 高度测量不一致； 有时它来自字体本身，有时浏览器自行计算。

与 em 和 rem 一样，它取决于字体，但主要区别在于当您更改font-family时 ex 也会更改，而其他两个则不是这样。

[CSS]
。盒子{
宽度：150ex；
身高：150ex；
}
[/CSS]

通道

Ch 类似于 ex 但它不依赖于 x 高度； 而不是零 (0) 字符的宽度。 它也随font-family改变。

[CSS]
。盒子{
宽度：150ch；
高度：150ch；
}
[/CSS]

视口相关单位

有几个单位取决于视口的高度和宽度大小，例如：

• vh（视口高度）
• vw（视口宽度）
• vmin（最小视口）
• vmax（最大视口）

Vh

Vh（视口高度）测量为1vh ，等于视口高度的 1%。 该单元对于创建全高元素非常有用。 Vh 与百分比的反应类似，但不依赖于父元素的高度。

您可以在任何地方使用 vh，但 vh 最常见的用例是制作全高元素。 在此示例中， full-height类将创建一个蓝色容器，该容器将是视口的 100% 高度。

[CSS]
.全高{
高度：100vh；
背景：蓝色；
}
[/CSS]

大众

Vw（视口宽度）与 vh 类似，但它考虑的是宽度，而不是视口的高度。 1vw 等于视口宽度的 1%。 如果您想基于排版创建响应式视口，这些单位会非常有用。

在本例中， h1的font-siz是视口宽度的 6%，因此如果视口宽度为 1000px，则字体大小将为 60px，如果视口为 500px，则字体大小将为 30px。

[CSS]
h1{
字体大小：6vw；
}
[/CSS]

最小值

Vmin 是根据视口的宽度或高度的最小值计算的，以较小者为准。 假设您的视口大小为 1000 像素高 x 800 像素宽。 1vmin将等于 8px。

最大电压

Vmax 的计算与vmin完全相反，其中最大值被认为是视口。

与前面 1000px 高 x 800px 宽的视口示例一样， 1vmax将等于 10px。

现在让我们探讨如何有效地使用vmin和vmax 。 使用我们之前的示例，假设我们现在想要基于视口大小而不是固定值来获得流畅的填充和边距。

在此代码片段中，我将填充设置为3vmax并将边距设置为1.5vmin 。

[CSS]
.post-item{
粉红色背景；
填充：3vmax；
余量：1.5vmin；
}
[/CSS]

填充和边距将根据视口大小而变化。

百分比（%）单位

百分比（%）单位不属于上述任何特定类别，但可以归类为相对单位。 它是相对于其父元素的。

百分比主要与元素的高度和宽度相关，但可以在允许 CSS 长度单位的任何地方使用。

百分比是创建响应式或流畅布局最有用的单位之一。 Bootstrap、foundation 和 Bulma 等流行框架使用百分比作为其基本布局。

这里的full-width类将是其父元素的 100% 宽度。

[CSS]
。全屏宽度{
宽度：100%；
}
[/CSS]

结论

我们已经涵盖了几乎所有可用的 CSS 单元。 根据您的目标，有些会比其他更适合。 作为一名前端开发人员，了解您的选择总是好的，因为您永远不知道在下一个项目中可能需要哪一个。

那么，您最常使用哪些单位来获得所需的结果？ 在下面的评论部分让我们知道！