为什么CSS尺寸单元很重要

CSS尺寸单元是设计响应能力的骨干。这些单元定义了与他人或视口本身有关的元素应出现的大小或小。就像魔术公式告诉您的网站如何在不同的屏幕尺寸上行事。没有这些单元，您的设计最终可能会看起来尴尬，伸展或在某些设备上狭窄。

，但这是事实：大小单元的类型不同，并非所有单位都是相同的。有些是固定的，而另一些则根据屏幕或周围内容进行更改。让我们深入研究这些单元，以便您可以为工作选择合适的单元。

绝对与相对单位：有什么区别？

要了解不同的大小单元，您首先需要了解它们属于的两个基本类别：绝对和相对单位。

绝对单位非常简单。它们是固定的，无论屏幕尺寸如何，都不会改变。将它们视为永远不会改变的标尺。 另一方面，

绝对单位：旧学校

绝对单位正是他们听起来的样子 - 藏在石头上。他们不在乎屏幕尺寸，布局或任何其他因素。当您使用绝对单元时，您将锁定元素的大小。尽管这为您提供了全部控制，但这也意味着您的设计可能无法很好地适应不同的屏幕。 这是一些最常见的绝对单元：
Pixels（PX）：

精确尺寸的经典选择。一个像素对应于屏幕上的一个点。

这些单元在打印设计中更常见，但如果需要，可以在Web设计中使用。

从打印世界中借来的，这些对印刷样式诸如打印样式很有用，但不经常用于Web Design。 尽管绝对单元可以使事情看起来锋利，但它们并没有为现代响应式网站提供太大的灵活性。这就是相对单位介入的地方。

• 相对单位：灵活性的真正力量 相对单位是魔术发生的地方。这些单元根据周围内容或屏幕尺寸进行扩展，使其非常适合创建各处看起来不错的设计，从小屏幕到巨大的显示器。 让我们看一下关键的相对单元：
• 百分比（％） 百分比单位全部有关。如果将元素的宽度设置为50％，那么它将占用其父装容器的一半，无论该容器有多大或小容器。它是响应迅速布局的理想选择，您希望根据可用空间进行调整。
• 。容器 { 宽度：100％； / *占用父容器的100％ */ } EM和REM：用文字缩放

em相对于父元素的字体大小。

rem与root元素（）上设置的字体大小相对。 这些单元非常适合在整个网站上创建可扩展的版式或间距，尤其是当用户更改浏览器的默认字体尺寸时。

视口单元（大众，VH）

视口单元非常适合创建根据浏览器窗口的实际大小进行调整的全屏部分或元素。这些单元根据视口的宽度或高度进行扩展，因此您可以设计全屏英雄部分或动态版式，以响应用户的屏幕大小。

.container {
  width: 100%; /* Takes up 100% of the parent container */
}

1VW是视口宽度的1％。

VH：

1VH是视口高的1％。 这些对于现代流体布局特别有用。

。英雄{ 宽度：100VW; / *视口的全宽度 */ 身高：100VH； / *视口的全高度 */ }
您应该使用哪个单元？

html {
  font-size: 16px; /* Set base font size */
}

h1 {
  font-size: 2rem; /* 32px */
}

p {
  font-size: 1.5em; /* 24px, based on the parent element's font size */
}

固定元素：需要绝对控制时使用PX。图标，边界和其他需要精确尺寸的小元素之类的东西非常适合像素。

对于流体布局：当您希望元素根据容器的尺寸适应元素时使用％。这非常适合应随屏幕尺寸向上或向下扩展的网格，列或部分。

排版：使用REM在您的网站上进行一致性，并根据父容器的字体大小进行本地调整。

全屏幕部分：使用大众和VH创建占用整个视口大小的部分，无论屏幕尺寸如何
• 避免的常见错误
在使用CSS尺寸单元时，有时甚至有经验的设计师有时会犯错误。这是要注意的地方：
• 过多地依赖于像素：虽然PX易于使用，但对响应设计无济于事。
忽略根字体大小：如果您使用的是REM，请确保在HTML元素中设置基本字体大小。否则，您的版式看起来可能不一致。

单位使用不一致：在没有明确策略的情况下混合PX，％和EM会导致不可预测的结果。保持单位使用量一致。

.container {
  width: 100%; /* Takes up 100% of the parent container */
}

总结：CSS尺寸单元

CSS尺寸单元对于在任何屏幕上都可以创建效果很好的网站至关重要。借助PX和诸如％，EM，REM和视口单元（例如PX）的绝对单元，您可以设计响应式的布局，可以很好地适应跨设备的精美。

关键是要了解何时使用每个单元以及它们如何相互作用。通过掌握CSS尺寸单元，您将解锁响应式Web设计的全部潜力，并创建各处看起来很棒的网站。 因此，走出去，尝试这些单元，使您的设计比以往任何时候都更加流畅和响应！ 开心设计！