Absolute vs. Relative Units

The two main categories of CSS units

straighten Absolute Units

  • check_circle px Pixels
  • check_circle cm Centimeters
  • check_circle mm Millimeters
  • check_circle in Inches
  • check_circle pt Points (1/72 of inch)
  • check_circle pc Picas (1/6 of inch)

Key Characteristics

arrow_right Fixed size regardless of screen
arrow_right Best for print media
arrow_right Predictable but not responsive

aspect_ratio Relative Units

  • check_circle em Relative to parent font size
  • check_circle rem Relative to root font size
  • check_circle % Percentage of parent element
  • check_circle vh Viewport height (1/100)
  • check_circle vw Viewport width (1/100)
  • check_circle vmin/vmax Smallest/largest viewport dimension

Key Characteristics

arrow_right Scale with parent or viewport
arrow_right Essential for responsive design
arrow_right More flexible and accessible