CSS 中的绝对单位与相对单位

在 CSS 中设置元素样式时，您有两类单位可供选择：绝对单位 和 相对单位。以下是它们的详细说明以及它们的区别：

---

1.绝对单位

绝对单位是固定测量单位。它们不受其他元素或屏幕尺寸的影响，这意味着无论使用它们的上下文如何，它们的尺寸都是恒定的。

常用绝对单位：

• px（像素）：像素是屏幕上的一个小方块。它是固定布局最常用的单位。

  • 示例：

  h1 {
    font-size: 24px;
  }
  

• pt（点）：通常用于印刷媒体，1pt 等于 1/72 英寸。

• cm（厘米） 和 in（英寸）：在网页设计中很少使用，这些单位基于物理尺寸。

绝对单位的优点：

• 一致性：无论设备或屏幕尺寸如何，尺寸始终相同。
• 可预测：非常适合创建固定布局，您希望设计在所有平台上看起来完全相同。

缺点：

• 缺乏灵活性：绝对单位不能很好地适应不同的屏幕尺寸或缩放设置，导致响应速度较差。

---

2.相对单位

相对单位灵活并根据它们使用的上下文进行缩放。它们的大小取决于其他元素，例如父容器、视口或基本字体大小。

常用相对单位：

• em：相对于其所使用的元素的字体大小。如果父元素的 font-size 为 16px，则 1em 等于 16px。如果父元素的大小发生变化，em 的大小也会发生变化。

  • 示例：

  p {
    font-size: 1.5em; /* 1.5 times the font size of the parent */
  }
  

• rem（根em）：相对于根元素（通常是元素）的字体大小。与 em 相比，这使其更具可预测性。

默认情况下，除非另有说明，浏览器通常将根字体大小设置为 16px。如果您为元素定义了自定义字体大小，则所有 rem 值都将根据该新大小进行计算。

• 示例：
  

  p {
    font-size: 2rem; /* 2 times the root font size */
  }
  

  • %（百分比）：相对于父元素的大小。例如，width: 50% 使元素宽度为其父容器的 50%。

• 示例：
  

  div {
    width: 75%; /* 75% of the parent's width */
  }
  

  • vw（视口宽度） 和 vh（视口高度）：这些单位相对于浏览器的视口。 1vw 是视口宽度的 1%，1vh 是视口高度的 1%。

• 示例：
  

  div {
    width: 50vw; /* 50% of the viewport's width */
  }
  

相对单位的优点：

• 响应式设计：相对单位根据屏幕尺寸、字体大小或容器尺寸自动缩放，使您的设计更加灵活。
• 更容易维护：更改根元素的字体大小（使用 rem）可以缩放整个设计。

缺点：

• 可能更难控制：如果没有很好地理解继承以及大小如何通过元素级联，相对单位有时会产生意想不到的结果。

---

何时使用绝对单位与相对单位

• 当您需要精确、固定的测量时，绝对单位（如 px）是最好的选择。当您希望某些东西在任何地方都具有相同的尺寸（例如，小徽标或图标）时，请使用这些。
• 相对单位（如 em、rem、vw 和 %）非常适合响应式设计。它们允许元素根据屏幕尺寸或父元素进行缩放和调整，使您的设计更加灵活。

---

示例：实践中的绝对单位与相对单位

<style>
  .absolute {
    font-size: 24px; /* Absolute unit */
  }

  .relative {
    font-size: 1.5rem; /* Relative unit */
  }

  /* Root font size: 16px */
  html {
    font-size: 16px;
  }
</style>

<h1 id="This-is-px-text">This is 24px text</h1>
<h1 id="This-is-rem-text-px-based-on-root-size">This is 1.5rem text (24px based on root size)</h1>

在此示例中：

• 絶対フォント サイズ (24px) は常に同じです。
• 相対フォント サイズ (1.5rem) は、ルート フォント サイズ (16px) に基づいて調整され、24px になります。

---

結論:

• デバイス間での一貫性が必要な場合は、絶対単位を使用しますが、応答性が低いことに注意してください。
• 特に複数の画面サイズやデバイス向けに開発する場合、より柔軟で応答性の高いデザインを実現するには、相対単位を使用します。

以上是CSS 中的绝对单位与相对单位的详细内容。更多信息请关注PHP中文网其他相关文章！