The Ultimate Guide to Responsive Web Development

Manish Kumar Sundriyal - Oct 4 - - Dev Community

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; 
  }
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode

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) */
}
Enter fullscreen mode Exit fullscreen mode

  • 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;
}
Enter fullscreen mode Exit fullscreen mode
  • 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);
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode 


.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;
}
Enter fullscreen mode Exit fullscreen mode

Read more about Flexbox here

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>
Enter fullscreen mode Exit fullscreen mode 


.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;
}
Enter fullscreen mode Exit fullscreen mode

Read more about Grid here

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>
Enter fullscreen mode Exit fullscreen mode 


.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 */
  }
}
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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;
  }
}
Enter fullscreen mode Exit fullscreen mode
Image
No Smoking Animation

codepen, webdev, javascript, beginners
Image
Performance Boost: 10 Expert Tips for Optimizing Your Amazon OpenSearch Service Cluster

aws, opensearch, optimize, performance
Image
Implementing Parallel Merge Sort: 25sec vs 1.5sec

algorithms, computerscience, tutorial, programming
Image
React: Debouncing input with useEffect

react, reacthooks, debounce
Image
The Dangers of Self-Diagnosis with Bioresonant Devices

bioreasonance
Image
SvG Animation

codepen, javascript, azure, beginners
Image
Incident Priority Matrix: A Comprehensive Guide to Efficient Incident Management

prioritylevels, incidenthandling, incidenttriage, incidentescalation
Image
Grapes Supplier From Nashik
Image
Logging Database Queries with Eloquent ORM and Laravel – Fast Tips

laravel, php, webdev, tutorial
Image
Fine-Tune Llama 3.1 8B using QLORA
Image
Illustrators' Fears: AI Extracting Value from Creative Work

machinelearning, ai, beginners, datascience
Image
Get Certified with Google Professional-Cloud-Security-Engineer Exam Dumps 2k24
Image
Adversarial Student-Teacher Redteaming Probes AI Vulnerabilities for Enhanced Robustness

machinelearning, ai, beginners, datascience
Image
SwitchHead: Accelerate Transformers with Dynamic Mixture-of-Experts Attention

machinelearning, ai, beginners, datascience
Image
EasyTest - Simple Test Framework for JavaScript/TypeScript

javascript, typescript, testing
Image
FiT: Scalable Vision Transformer for Improved Diffusion Image Generation

machinelearning, ai, beginners, datascience
Image
Grapes Supplier From Tasgaon
Image
Closing the Gap: Intelligent Visual Deductive Reasoning in AI

machinelearning, ai, beginners, datascience
Image
How to create a button component with variants and icons with Astro JS and Tailwind CSS

tailwindcss, astro, javascript, tutorial
.
Terabox Video Player