Understanding CSS Measurement Units

CSS provides various measurement units to define the size of elements on a web page. Understanding these units will help you create more responsive and flexible designs.

1. Absolute Units

1.1. Pixel (px)

• The most basic unit in CSS
• 1px equals one dot on the screen
• Size remains constant regardless of screen size changes
• Commonly used for borders and fixed dimensions

.box {
    width: 200px;
    height: 100px;
    border: 1px solid black;
}

1.2. Print Units

• in: inch (1in = 96px)
• cm: centimeter
• mm: millimeter
• pt: point (1pt = 1/72 inch)
• pc: pica (1pc = 12pt)

Note:

• In modern web development, px and % are primarily used
• pt, cm, in are mainly for print publishing (PDF, paper printing)

2. Relative Units

2.1. Percentage (%)

• Relative to the parent element's size
• Commonly used for responsive layouts

.container {
    width: 80%;
    margin: 0 auto;
}

2.2. Viewport Units

• vw: 1% of viewport width
  • Example: width: 50vw (takes up 50% of screen width)
• vh: 1% of viewport height
  • Example: height: 30vh (takes up 30% of screen height)
• vmin: 1% of the smaller dimension between viewport width and height
  • Example: width: 20vmin (takes up 20% of the smaller viewport dimension)
• vmax: 1% of the larger dimension between viewport width and height
  • Example: height: 50vmax (takes up 50% of the larger viewport dimension)

Note:

• On desktop, vw and vh are quite stable
• On mobile, they are NOT stable because:
  • Navigation bars and URL bars can change the actual viewport
  • For example: 100vh sometimes isn't enough to cover the entire phone screen because the browser subtracts the toolbar

2.3. Modern Viewport Units

New viewport units introduced to solve mobile viewport issues: (Introduced in CSS Viewport Level 4, well supported from iOS 16.0+, latest Android Chrome)

• svw, svh: Small viewport width/height

  • Based on the smallest viewport size when address bar and browser tools are visible
  • Useful for ensuring content is always fully visible

• lvw, lvh: Large viewport width/height

  • Based on the largest viewport size when address bar and browser tools are hidden
  • Suitable for full-screen effects

• dvw, dvh: Dynamic viewport width/height

  • Automatically adjusts between small and large viewport
  • Most flexible solution for responsive design

Note:

• dvh (Dynamic Viewport Height) is very useful for mobile as it flexibly changes with URL bar visibility and virtual keyboard
• If you want to truly cover the entire mobile screen (even when URL bar is visible), use 100dvh instead of 100vh

/* Examples of modern viewport units usage */
.full-screen {
    /* Use dynamic viewport to ensure good display on all devices */
    height: 100dvh;
    width: 100dvw;
}

.fixed-header {
    /* Use small viewport to ensure header is always visible */
    height: 10svh;
}

.expandable-section {
    /* Use large viewport for expandable elements */
    max-height: 90lvh;
}

2.4. Font-relative Units

• em: Based on parent element's font-size
  • Example: width: 5em (5 times the parent's font size)
• rem: Based on root element's (html) font-size
  • Example: font-size: 1.5rem (1.5 times the root font size)
• ch: Width of the "0" character
• ex: Height of the "x" character

html {
    font-size: 16px;
}

.text {
    font-size: 1.5em; /* 24px */
    margin: 2rem; /* 32px */
}

3. New CSS Units

3.1. Container Units

• cqw: 1% of container width
• cqh: 1% of container height
• cqi: 1% of container's inline size
• cqb: 1% of container's block size
• cqmin: 1% of the smaller dimension
• cqmax: 1% of the larger dimension

@container (min-width: 300px) {
    .card {
        width: 50cqw;
    }
}

4. When to Use Which Units

4.1. When to use absolute units?

• For fixed dimensions
• For borders and shadows
• For non-responsive elements

4.2. When to use relative units?

• For responsive design
• For flexible layouts
• For typography and spacing
• When relative proportions between elements are needed

5. Best Practices

1. Use rem for font-size and spacing
2. Use % for responsive layouts
3. Use vw/vh for full-screen elements
4. Combine units flexibly
5. Avoid using px for font-size to ensure accessibility

Usage Summary

Conclusion

Understanding and using CSS measurement units correctly is crucial for creating responsive and flexible web designs. Each unit has its specific purpose, and combining them appropriately will help you create better user interfaces.