A Detailed Explanation of Common Units in CSS (px, em, rem, %, vw/vh, etc.)

1. Knowledge Description
CSS units are fundamental for defining element dimensions, spacing, font sizes, and other properties. Different units possess distinct calculation characteristics and applicable scenarios. A correct understanding and use of these units are crucial for achieving precise layouts and responsive design. This section systematically explains the core differences and application methods of common units such as px, em, rem, %, and vw/vh.

2. Detailed Unit Explanation and Problem-Solving Process

2.1 Absolute Unit: px

• Definition: px (pixel) is an absolute unit. 1px corresponds to one physical pixel point on the screen. Its size is fixed and is not influenced by parent elements or the viewport.
• Calculation Property: Directly set a specific numeric value (e.g., width: 200px), rendering size remains unchanged in any environment.
• Applicable Scenarios:
  • Border thickness requiring precise control (e.g., border: 1px solid #000).
  • Icons or images with fixed dimensions.
• Note: On high-resolution screens, 1px may correspond to multiple physical pixels, but browsers handle this automatically to ensure visual consistency.

2.2 Relative Unit: em

• Definition: em is a relative unit. Its reference value depends on the font size (font-size) of the current element.
• Calculation Rules:
  • If the current element does not have font-size set, it inherits the parent element's font size.
  • Calculation formula: Actual Value = Set Value × Current element's font-size.
  • Example: If the current element's font-size: 16px, then 2em = 2 × 16px = 32px.
• Nesting Example:

  .parent { font-size: 20px; }
  .child {
    font-size: 0.5em;  /* 10px */
    padding: 2em;      /* 2 × 10px = 20px */
  }
  

• Applicable Scenarios: Situations where spacing needs to adjust relative to font size (e.g., button padding changing with font size).

2.3 Relative Unit: rem

• Definition: rem (Root em) is a relative unit. Its reference value is always the font size of the root element (html).
• Calculation Rules:
  • Directly depends on the font-size of the html element (typically defaults to 16px).
  • Calculation formula: Actual Value = Set Value × html's font-size.
  • Example: If html { font-size: 16px }, then 1.5rem = 1.5 × 16px = 24px.
• Advantage: Avoids the nesting calculation issues of em, making it easier to control overall layout proportions.
• Responsive Application: Adjust the root font size via media queries to achieve overall scaling:

  html { font-size: 16px; }
  @media (min-width: 768px) {
    html { font-size: 18px; } /* All rem units scale based on the new reference */
  }
  

2.4 Percentage Unit: %

• Definition: The percentage unit depends on the corresponding property value of the parent element.
• Calculation Rules:
  • Width (width): Calculated relative to the width of the parent element.
  • Height (height): Calculated relative to the height of the parent element (requires the parent element to have an explicit height).
  • Font size (font-size): Calculated relative to the font size of the parent element.
  • Example: Parent element width: 300px, child element width: 50% results in a width of 150px.
• Special Cases:
  • Positioned elements: Properties like top/left are calculated relative to the dimensions of the positioned parent element.
  • Line height (line-height): Calculated relative to the current element's font size (e.g., line-height: 150%).

2.5 Viewport Units: vw/vh

• Definition: vw (viewport width unit) and vh (viewport height unit) are calculated relative to the browser viewport dimensions.
• Calculation Rules:
  • 1vw = 1% of the viewport width, 1vh = 1% of the viewport height.
  • Example: When the viewport width is 1200px, 50vw = 600px.
• Extended Units:
  • vmin: Takes the smaller value between vw and vh.
  • vmax: Takes the larger value between vw and vh.
• Applicable Scenarios:
  • Full-screen layouts: e.g., setting height: 100vh to occupy the full screen height.
  • Responsive typography: font-size: 4vw allows text to scale with viewport width.

3. Unit Selection Strategy

1. Fixed Dimensions: Use px (e.g., borders, shadows).
2. Component-Level Responsiveness: Use rem as the primary unit, controlling overall scaling through the root font size.
3. Layout Containers: Use % or vw/vh to achieve fluid layouts.
4. Typography and Spacing: Prefer rem for consistency, use em locally for relative scaling.

4. Practical Comparison
Assuming a root font size of 16px and a viewport width of 1200px:

• 2rem = 32px (always fixed)
• 200% = Twice the width of the parent element (dependent on parent)
• 20vw = 240px (changes with viewport)
• 2em = Twice the current font size (may change due to nesting)

By understanding the calculation reference and responsive nature of each unit, they can be flexibly combined to achieve precise and adaptive layout effects.