Relative and Absolute Units in CSS

Welcome to the lesson on relative and absolute units! Dimension matters! This lesson introduces you to the diverse units in CSS, essential for responsive design. 

In CSS, length can be defined using either absolute or relative units. The choice of units can have a big impact on the flexibility and scalability of your designs.

In this lesson, we are going to explore the differences between relative and absolute units and when to use them. This knowledge is key to creating designs that look stunning on any device.

Desired Outcomes

  • Differentiate between relative and absolute units
  • Use appropriate units for various use-cases
  • Create designs that adapt to different screen sizes and resolutions

Absolute Units

Absolute units are fixed-length units. They represent a physical measurement and don't scale based on any other factors like the size of the viewport or parent element. The absolute units in CSS are:

  • Pixels (px): Pixels are the most common unit used in web design. One pixel is equal to one dot on the computer screen, the smallest unit of measure that a screen can display.
  • Points (pt): Points are traditionally used in print media (one point is equal to 1/72 of an inch). In CSS, one point is defined as 1/72nd of 1in.
  • Inches (in): Rarely used in web design, inches are more common in print design.
  • Centimeters (cm) and Millimeters (mm): Like inches, these are more commonly used in print design.
  • Picas (pc): One pica is equivalent to 12 points, or about 1/6th of an inch.

While absolute units can be useful in some scenarios (like when you need an exact size for an element), they don't offer much flexibility for responsive web design. As most of what we’ll be doing is made for a screen, we will mostly be using pixels when working with absolute units.

Relative Units

Relative units are scaled quantities. They are relative to another length value, like the size of the viewport or the size of the parent element. Relative units in CSS are:

  • Percentages (%): This unit is relative to the parent element. For example, if a parent element is 500px wide, a child element with a width of 50% will be 250px wide.
  • Viewport Width (vw): One viewport width is equal to 1% of the viewport's width. For example, an element with a width of 50vw will take up half of the viewport's width, regardless of the screen size.
  • Viewport Height (vh): One viewport height is equal to 1% of the viewport's height.
  • em: This unit is relative to the font size of the element. If the font size of the element is 16px, 1em is equal to 16px.
  • rem: This unit is relative to the font size of the root element (typically the <html> element). If the font size of the document is 16px, 1rem is equal to 16px.
  • Viewport Minimum (vmin): One vmin is equal to 1% of the smaller dimension (height or width) of the viewport.
  • Viewport Maximum (vmax): One vmax is equal to 1% of the larger dimension (height or width) of the viewport.

Relative units offer much more flexibility and scalability compared to absolute units, making them better suited for responsive web design. For example, using relative units allows your text to scale according to the user's custom settings, improving accessibility.