Understand Before You Build

  • HTML
    • Form
    • HTML pattern Attribute
  • CSS
    • inset
    • scroll-snap-type
    • margin-inline
    • Content-visibility
    • Scroll-Driven Animations
    • Isolation
    • @Container
    • @layer
    • :not()
    • :is()
    • :Where()
    • :has()
    • :target
    • backdrop-filter
    • :root
    • Color-scheme
    • Animations
    • Selectors
    • Object-fit
    • Logical Pseudo-Classes
    • :scope
    • Properties
    • Performance
    • Aspect-ratio
    • State Pseudo-Classes
    • Positioning
    • Resize
    • Structural Pseudo-Classes
    • Responsive Design
    • Units
    • Root & Scope Selectors
    • Scrolling
    • At-Rules
    • Target & URL Selectors
    • Spacing
    • Functions
    • Attribute Selectors
    • Layouts
    • Basic Selectors
    • Filters & Effects
    • Colors & Typography
    • Flexbox
    • Combinator Selectors
    • Grid
    • Form & UI State Selectors
    • AI CSS Generator
  • Sass
    • Variables
    • Nesting
    • Mixins
    • Reusable styles
    • Large project management
  • CSS Frameworks
    • Material UI
    • Bootstrap
    • Tailwind CSS
  • React UI
    • Performance Optimization
    • React.memo
    • useMemo
    • useCallback
    • Lazy Loading
    • Code Splitting
    • Virtual DOM Optimization
    • Preventing Re-renders
    • Props & State
    • Hooks
    • Component-based architecture
    • State-driven UI updates
  • Figma
    • Design systems
    • Tokens
    • Variables
    • Auto layout
    • Component variants
    • Design handoff
    • UI consistency

Units

CSS Units are used to define sizes, spacing, widths, heights, typography, positioning, and layouts in CSS.

CSS units help control:

  • Font size
  • Width and height
  • Padding and margin
  • Responsive layouts
  • Viewport sizing
  • Modern scalable UI design

Types of CSS Units

CSS units are mainly divided into two categories:

  • Absolute Units
  • Relative Units

[grid] Responsive CSS Units Example Viewport Unit Layout Typography Scaling Demo Modern Responsive Sizing [/grid]

Absolute Units

Absolute units have fixed sizes.

They do not change based on screen size or parent elements.

Unit Description
px Pixels
cm Centimeters
mm Millimeters
in Inches
pt Points

px Unit

[code theme="dark"] .box{ width:300px; } [/code]

px is the most commonly used fixed-size unit.


Relative Units

Relative units depend on parent size, root size, viewport, or content size.

Unit Relative To
% Parent size
em Parent font size
rem Root font size
vw Viewport width
vh Viewport height
vmin Smaller viewport side
vmax Larger viewport side
ch Width of "0" character

Percentage Unit

[code theme="dark"] .box{ width:50%; } [/code]

The element takes 50% width of its parent.


em Unit

[code theme="dark"] .box{ font-size:2em; } [/code]

Depends on the parent font size.


rem Unit

[code theme="dark"] .box{ font-size:2rem; } [/code]

Depends on the root:

[code theme="dark"] html [/code]

font size.


Viewport Units

[code theme="dark"] .hero{ height:100vh; } [/code]

The section becomes full screen height.


[code theme="dark"] .title{ font-size:5vw; } [/code]

Text size scales based on viewport width.


Modern Dynamic Viewport Units

Modern CSS introduced new mobile-friendly viewport units:

Unit Description
svh Small viewport height
lvh Large viewport height
dvh Dynamic viewport height

[code theme="dark"] .hero{ min-height:100dvh; } [/code]

Useful for mobile browsers with dynamic address bars.


CSS Unit Comparison

Unit Responsive Best Use
px No Fixed UI elements
rem Yes Typography
% Yes Layout sizing
vw / vh Yes Fullscreen layouts

Best Practices

  • Use rem for typography
  • Use % for flexible layouts
  • Use vw/vh carefully
  • Avoid excessive fixed px layouts
  • Use modern viewport units for mobile layouts

Advantages of Relative Units

  • Better responsiveness
  • Improved accessibility
  • Flexible layouts
  • Modern scalable UI systems
  • Better mobile support

Cross Browser Compatibility

Most CSS units are supported across all modern browsers.

  • px, %, em, rem → Excellent support
  • vw, vh → Excellent support
  • dvh, svh, lvh → Modern browser support
  • ch → Good support

Older browsers may not support newer dynamic viewport units fully.


Browser Support Summary

[code theme="dark"] .hero{ min-height:100dvh; } [/code]

CSS units are one of the most important foundations of responsive and modern frontend development.