Skip to content
High-Performance Full Stack-Development

Search is only available in production builds. Try building and previewing the site to test it out locally.

Responsive Units

We’ve covered the importance of responsive design and explored media queries as the foundation for achieving it. Now, let’s discuss responsive units, another essential tool for creating adaptable layouts.

Responsive Units

Traditional CSS units like pixels (px) define fixed sizes that don’t adjust to the viewport (the user’s screen size). For responsive design, we need units that adapt to different screen dimensions. Here are some key responsive units:

  • Viewport Units (vh, vw):
    • vh: Represents a percentage of the viewport height. 100vh is 100% of the viewport height.
    • vw: Represents a percentage of the viewport width. 100vw is 100% of the viewport width.
  • Rem (rem):
    • A relative unit based on the font size of the root element (usually <html>). 1rem equals the font size of the root element.

Applications of Responsive Units:

  • Fluid Layouts: Use vh or vw to define element sizes or spacing as a percentage of the viewport. This allows elements to scale proportionally with the screen size.
  • Font Sizing: Use rem to define font sizes relative to the root element’s font size. This ensures fonts scale proportionately with other elements, maintaining readability across devices.
  • Responsive Grids: Combine rem or vw with grid layout properties to create flexible grids that adapt to different screen sizes.

Example:

<div class="container">
  <h1>This is a heading</h1>
  <p>This is a paragraph of text.</p>
</div>
html {
font-size: 16px; /_ this Set base font size _/
}


.container {
width: 80vw; /_ 80% of viewport width _/
margin: 2rem; /_ 2rem margin (relative to base font size) _/
}


h1 {
font-size: 2rem; /_ Font size relative to base _/
}


p {
font-size: 1.25rem; /_ Adjust paragraph size based on base _/
}


/_ Media queries for smaller screens can adjust these values further _/

In this example, we use vw and rem to create a responsive layout. The container adjusts its width based on the viewport width, while margins and font sizes remain relative to the base font size. This ensures a consistent and readable layout across different screen sizes.

Choosing the Right Unit:

The choice between vh, vw, and rem depends on the specific element you’re styling. Here’s a general guideline:

  • Use vh for elements that should scale proportionally to the viewport height (e.g., sidebars).
  • Use vw for elements that should scale proportionally to the viewport width (e.g., content area width).
  • Use rem for most font sizes and spacings to ensure relative scaling based on the base font size.

By incorporating responsive units into your CSS, you can create truly flexible and adaptable layouts that provide an optimal viewing experience on any device.