Absolute vs. Relative Units in CSS

When styling elements in CSS, you have two categories of units to choose from: absolute units and relative units. Here's a breakdown of each of them and how they differ:

---

1. Absolute Units

Absolute units are fixed units of measurement. They are not affected by other elements or screen sizes, meaning their size is constant regardless of the context in which they are used.

Common Absolute Units:

• px (pixels): A pixel is a small square on the screen. It's the most commonly used unit for fixed layouts.

  • Example:

  h1 {
    font-size: 24px;
  }
  

• pt (points): Typically used in print media, 1pt equals 1/72 of an inch.

• cm (centimeters) and in (inches): Rarely used in web design, these units are based on physical dimensions.

Advantages of Absolute Units:

• Consistency: The size will always be the same, no matter the device or screen size.
• Predictable: Ideal for creating fixed layouts where you want the design to look exactly the same across all platforms.

Disadvantages:

• Lack of flexibility: Absolute units don’t adapt well to different screen sizes or zoom settings, making them less responsive.

---

2. Relative Units

Relative units are flexible and scale based on the context they are used in. Their size depends on other elements, such as the parent container, viewport, or base font size.

Common Relative Units:

• em: Relative to the font size of the element it’s used on. If the parent element has a font-size of 16px, 1em equals 16px. If the parent element’s size changes, so will the size in em.

  • Example:

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

• rem (root em): Relative to the font size of the root element (usually the element). This makes it more predictable compared to em.

By default, browsers typically set the root font size to 16px, unless specified otherwise. If you define a custom font size for the element, all rem values will be calculated based on that new size.

• Example:
  

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

  • % (percent): Relative to the parent element's size. For example, width: 50% makes the element 50% the width of its parent container.

• Example:
  

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

  • vw (viewport width) and vh (viewport height): These units are relative to the browser’s viewport. 1vw is 1% of the viewport's width, and 1vh is 1% of the viewport's height.

• Example:
  

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

Advantages of Relative Units:

• Responsive design: Relative units scale automatically based on screen size, font size, or container dimensions, making your design more flexible.
• Easier to maintain: Changing the font size of the root element (using rem) can scale your entire design.

Disadvantages:

• Can be harder to control: Without a good understanding of inheritance and how sizes cascade through elements, relative units can sometimes produce unexpected results.

---

When to Use Absolute vs. Relative Units

• Absolute units (like px) are best when you need precise, fixed measurements. Use these when you want something to be the same size everywhere (e.g., a small logo or icon).
• Relative units (like em, rem, vw, and %) are ideal for responsive design. They allow elements to scale and adapt based on the screen size or parent element, making your design more flexible.

---

Example: Absolute vs. Relative Units in Practice

<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>

In this example:

• La taille de police absolue (24px) restera toujours la même.
• La taille de police relative (1,5rem) s'ajustera en fonction de la taille de police racine (16 px), ce qui donne 24 px.

---

Conclusion :

• Utilisez des unités absolues lorsque la cohérence entre les appareils est nécessaire, mais sachez qu'elles ne sont pas réactives.
• Utilisez des unités relatives pour des conceptions plus flexibles et plus réactives, en particulier lors du développement pour plusieurs tailles d'écran et appareils.

The above is the detailed content of Absolute vs. Relative Units in CSS. For more information, please follow other related articles on the PHP Chinese website!