The Ultimate Guide to Responsive Web Development

Introduction

Here’s how you can make sure your designs stay flexible and look great on any device. Let’s take a look at the key things to consider when making a web application responsive.

CSS Units

CSS offers a variety of units, enough that it can sometimes be confusing to choose the right one.

px: Pixel-based units remain the same regardless of the screen size.
%: Percentage-based units are relative to the size of its parent element.
vw and vh: Viewport width/height based units are relative to the viewport's width/height.
dvw and dvh: Dynamic viewport width and height units are similar to vw and vh, but they adjust dynamically for changes in the viewport, i.e. when the on-screen keyboard appears.
rem: Relative to the root element's font size, offering a consistent base for scaling.
em: Relative to the font size of the current element, useful for scaling within components.
calc(): A function that allows you to perform calculations with different units. For example, calc(100% - 20px) can help mix relative and absolute units.

For a complete list of CSS units (though many are rarely used), check out this MDN Web Docs page.

Responsive Images

There are a few ways to improve your image responsiveness on the web.

Using width and height: auto

By setting a maximum width limit and height to auto, we can make our images responsive without changing the image's aspect ratio.

img {
    width: 100%; /* or any fixed width */
    height: auto; 
  }

Use max-width instead of width if you want an image to scale down, but never scale up larger than its original size.

Using the img element and srcset

What if you need different versions of the same image for different viewport sizes or resolutions? The <img> tag with srcset attribute allows the browser to automatically select the most appropriate image for the device.
Please note that different versions don't mean identical files but rather images that have been adjusted (e.g., resized, compressed) to suit different devices.

<img src="small.jpg" 
     srcset="small.jpg 600w, medium.jpg 1200w, large.jpg 2000w"
     sizes="(max-width: 600px) 100vw, 
            (min-width: 601px) and (max-width: 1200px) 75vw, 
            (min-width: 1201px) 50vw" 
     alt="Example Image">

If the viewport width is 600px or less, the browser will use small.jpg with 100vw width. The browser will also use small.jpg as a fallback image.
If the viewport width is between 601px and 1200px, the browser will use medium.jpg with 75vw width.
For any viewport width above 1200px, the browser will use large.jpg with 50vw width.

Using the picture element and srcset

What if you need different images for different viewport sizes or resolutions? The <picture> element with the srcset attribute allows you to define different images for different viewport sizes or resolutions.

<picture>
  <source srcset="small.jpg" media="(max-width: 600px)">
  <source srcset="medium.jpg" media="(max-width: 1200px)">
  <img src="large.jpg" alt="Example image">
</picture>

In this example:

If the viewport width is 600px or less, the browser will use small.jpg.
If the viewport width is between 601px and 1200px, the browser will use medium.jpg.
For any viewport width above 1200px, the browser will use large.jpg.

Responsive typography

Relative units

html {
    font-size: 16px;
}
.parent {
    font-size: 2rem; /* 32px (2 * 16px) */
}
.child {
    font-size: 0.5em; /* 16px (0.5 * 32px) */
}

The em unit is relative to the parent element's font size. In the example above, the child class has a font size of 16px because it is half of the parent element's font size, which is 32px.
The rem unit is relative to the root element's font size (html). In the example above, the parent class has a font size of 32px because it is twice the root's font size, which is 16px.

Viewport-based units

h1 {
  font-size: 5vw;
}
h2 {
  font-size: 5vh;
}

The vw unit is relative to the viewport's width.
The vh unit is relative to the viewport's height.

Clamp function

What if you need to use relative or viewport-based units but within a minimum and maximum limit?
For example, I want my font-size to be relative to the viewport's width, but the minimum value should be 12px and the maximum value should be 48px. The clamp function is the ideal choice for such scenarios.

h1 {
  font-size: clamp(12px, 3vw, 48px);
}

Responsive layouts

Flexbox

What if you need to align items majorly in one-dimensional layouts? (row or column)

<div class="card-container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

.card-container {
  display: flex; /* Enable flexbox layout */
  justify-content: space-around; /* Space evenly between and around cards */
}
.card {
  background-color: black;
  border: 1px solid white;
  color: white;
  text-align: center;
  padding: 20px;
}

Grid

What if you need to align items majorly in two-dimensional layouts? (row and column)

<div class="card-container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
  <div class="card">Card 4</div>
</div>

.card-container {
  display: grid; /* Enable grid layout */
  grid-template-columns: 1fr 1fr; /* Two equal columns */
  grid-template-rows: 1fr 1fr; /* Two equal rows */
  gap: 10px; /* Space between grid items */
  width: 100%; /* Full width of the container */
}
.card {
  background-color: black;
  border: 1px solid white;
  color: white;
  text-align: center;
  padding: 20px;
}

Media Queries

What if you want to apply specific styles when a device meets certain conditions? Most commonly, these conditions relate to the device's width.

<div class="card-container">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

.card-container {
  display: flex;
  flex-direction: column; /* Default: single-column layout */
}

/* Media query for tablet devices (min-width: 768px) */
@media (min-width: 768px) {
  .card-container {
    flex-direction: row; /* Change to two-column layout */
  }
  .card {
    flex: 1; /* Equal width for all cards */
  }
}

/* Media query for desktop devices (min-width: 1024px) */
@media (min-width: 1024px) {
  .card {
    flex: 25%; /* Each card takes 25% of the width */
  }
}

Media queries can also be used with other characteristics, such as height, orientation, aspect-ratio, resolution, pointer, prefers-color-scheme, and display-mode.

Viewport Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This tag is responsible for giving instructions to the browser on how to control the page's dimensions and scaling. The width=device-width part sets the width of the page to follow the screen width and initial-scale=1.0, which controls the zoom level when the page is first loaded.

Responsive frameworks and component libraries

If you don't want to reinvent the wheel, there are many responsive frameworks available to save time and effort.

Bootstrap: A widely used framework with pre-designed components for quick responsive site development.
Tailwind CSS: A utility-first framework that enables fast custom design with utility classes.
MUI: A React library based on Material Design, offering responsive pre-styled components.
ShadCN: Focuses on modern, accessible, and customizable responsive components.
Ant Design: A comprehensive design system by Alibaba for enterprise applications, featuring responsive components.

Designing with a Mobile-First Approach

A mobile-first approach means starting with the design for smaller screens, like smartphones, and then gradually adding more features for larger screens, like tablets and desktops. This way, we ensure that the basic experience works great on mobile, and then you build on that for bigger devices.

.card-container { /* default code is for mobile view */
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px;
  gap: 12px;
}

@media (min-width: 768px) { /* queries/cases are for larger views */
  .card-container {
    flex-direction: row;
    gap: 18px;
  }
}

Blog