Home/CSS/Responsive Design

Responsive Design

CSS Advanced•Reading time: 7 min

Responsive design is an approach to web design that makes websites look good on all devices and screen sizes, from desktop monitors to mobile phones.

In this tutorial, you'll learn techniques for creating flexible layouts that adapt to different viewport sizes, ensuring a consistent user experience across all devices.

1Responsive Design Basics

Responsive design is built on three core principles: flexible layouts, flexible media, and media queries. Together, these allow your website to adapt to any screen size.

Core Principles:

Flexible Layouts: Using relative units and flexible grid systems
Flexible Media: Images and videos that scale with their containers
Media Queries: CSS conditions that apply styles based on device characteristics
Viewport Meta Tag: Ensuring proper scaling on mobile devices

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <!-- Viewport meta tag for responsive design -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Website</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <!-- Your responsive content here -->
  </div>
</body>
</html>

Why Responsive Design Matters:

Better User Experience

Users can access your content on any device without pinching, zooming, or horizontal scrolling

SEO Benefits

Search engines favor mobile-friendly websites in their rankings

Cost Effective

Maintain one website instead of separate desktop and mobile versions

2Media Queries

Media queries allow you to apply different styles based on device characteristics like screen width, height, orientation, and resolution.

css

/* Base styles (applied to all devices) */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
}

.container {
  width: 100%;
  padding: 0 15px;
  margin: 0 auto;
}

/* Small devices (phones, 576px and up) */
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
  
  .col-md-6 {
    width: 50%;
    float: left;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

Common Media Query Features

min-width / max-width: Screen width thresholds
min-height / max-height: Screen height thresholds
orientation: Portrait or landscape
aspect-ratio: Width-to-height ratio
resolution: Pixel density (useful for high-DPI displays)

Media Query Examples

css

/* Change layout for landscape mode */
@media (orientation: landscape) {
  .sidebar {
    width: 30%;
    float: left;
  }
  .content {
    width: 70%;
    float: right;
  }
}

/* High resolution screens */
@media (min-resolution: 2dppx) {
  .logo {
    background-image: url('logo@2x.png');
  }
}

/* Print styles */
@media print {
  .no-print {
    display: none;
  }
  body {
    font-size: 12pt;
  }
}

Media Query Breakpoints:

Name	Width	Typical Devices	Media Query
Extra Small	< 576px	Phone (portrait)	@media (max-width: 575.98px)
Small	≥ 576px	Phone (landscape)	@media (min-width: 576px)
Medium	≥ 768px	Tablet	@media (min-width: 768px)
Large	≥ 992px	Desktop	@media (min-width: 992px)
Extra Large	≥ 1200px	Large Desktop	@media (min-width: 1200px)

3Fluid Layouts

Fluid layouts use relative units instead of fixed pixels, allowing content to adapt naturally to different screen sizes.

Relative Units

css

.container {
  width: 90%; /* Percentage of parent */
  max-width: 1200px; /* Maximum width */
  margin: 0 auto; /* Center the container */
}

h1 {
  font-size: 2rem; /* Relative to root font size */
}

p {
  font-size: 1em; /* Relative to parent font size */
  line-height: 1.5; /* Relative to element's font size */
  margin-bottom: 1.5em;
}

.sidebar {
  width: 30%; /* Percentage of parent */
}

.hero-section {
  height: 50vh; /* 50% of viewport height */
}

Viewport Units

css

/* Viewport units */
.full-height {
  height: 100vh; /* 100% of viewport height */
}

.half-width {
  width: 50vw; /* 50% of viewport width */
}

/* Modern sizing: clamp() */
.responsive-text {
  /* Min, preferred, max */
  font-size: clamp(1rem, 2vw, 2rem);
  padding: clamp(1rem, 5%, 3rem);
}

/* Using calc() for flexible calculations */
.flexible-width {
  width: calc(100% - 2rem);
  margin-left: 1rem;
  margin-right: 1rem;
}

Relative Units Comparison:

% - Relative to parent element's size
em - Relative to the font-size of the element
rem - Relative to the font-size of the root (html) element
vw/vh - Relative to viewport width/height (1vw = 1% of viewport width)
vmin/vmax - Relative to viewport's smaller/larger dimension

Fluid Images and Media

css

/* Make all images fluid by default */
img {
  max-width: 100%;
  height: auto;
}

/* Responsive video container */
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

Fluid Grid Example:

Column 1

Column 2

Column 3

Resize your browser to see how the columns stack on smaller screens

4Mobile-First Approach

The mobile-first approach means designing for mobile devices first, then progressively enhancing the design for larger screens. This strategy focuses on essential content and features from the beginning.

Desktop-First CSS

css

/* Desktop design (default) */
.container {
  width: 1200px;
  margin: 0 auto;
}

.navigation {
  display: flex;
}

.nav-item {
  margin-right: 20px;
}

/* Then adapt for smaller screens */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 0 15px;
  }
  
  .navigation {
    flex-direction: column;
  }
  
  .nav-item {
    margin-right: 0;
    margin-bottom: 10px;
  }
}

Mobile-First CSS

css

/* Mobile design (default) */
.container {
  width: 100%;
  padding: 0 15px;
}

.navigation {
  display: flex;
  flex-direction: column;
}

.nav-item {
  margin-bottom: 10px;
}

/* Then enhance for larger screens */
@media (min-width: 768px) {
  .container {
    width: 750px;
    margin: 0 auto;
  }
  
  .navigation {
    flex-direction: row;
  }
  
  .nav-item {
    margin-right: 20px;
    margin-bottom: 0;
  }
}

@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

Benefits of Mobile-First:

Forces prioritization of essential content and features
Typically results in cleaner, more efficient CSS
Better performance on mobile devices (where bandwidth might be limited)
Aligns with current web usage trends (mobile traffic often exceeds desktop)
Easier to progressively enhance than to retroactively simplify

Mobile-First Development:

1. Mobile Design

2. Tablet Design

3. Desktop Design

5Try It Yourself

Create a responsive navigation menu that transforms from a horizontal menu on desktop to a hamburger menu on mobile devices.

responsive-nav.css

Example Code

css

/* Base styles (mobile first) */
.nav-container {
  background-color: #333;
  padding: 1rem;
}

.logo {
  color: white;
  font-weight: bold;
  font-size: 1.2rem;
}

.nav-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Hamburger menu icon */
.menu-toggle {
  display: block;
  color: white;
  font-size: 1.5rem;
  cursor: pointer;
  background: none;
  border: none;
}

.menu-toggle .bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  background-color: white;
  transition: all 0.3s ease;
}

/* Navigation menu (hidden by default on mobile) */
.nav-menu {
  display: none;
  width: 100%;
  padding-top: 1rem;
}

/* When menu is active */
.nav-menu.active {
  display: block;
}

/* Navigation items */
.nav-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav-menu li {
  margin-bottom: 0.5rem;
}

.nav-menu a {
  color: white;
  text-decoration: none;
  display: block;
  padding: 0.5rem 0;
}

.nav-menu a:hover {
  color: #ddd;
}

/* Desktop styles */
@media (min-width: 768px) {
  .menu-toggle {
    display: none; /* Hide hamburger on desktop */
  }

  .nav-wrapper {
    display: flex;
    align-items: center;
  }

  .nav-menu {
    display: block !important; /* Always visible on desktop */
    width: auto;
    padding-top: 0;
  }

  .nav-menu ul {
    display: flex;
  }

  .nav-menu li {
    margin-bottom: 0;
    margin-left: 1.5rem;
  }
}

index.html

Example Code

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Navigation Menu</title>
  <link rel="stylesheet" href="responsive-nav.css">
</head>
<body>
  <nav class="nav-container">
    <div class="nav-wrapper">
      <div class="logo">Your Brand</div>
      <button class="menu-toggle" aria-label="Toggle navigation menu">
        <span class="bar"></span>
        <span class="bar"></span>
        <span class="bar"></span>
      </button>
      <div class="nav-menu">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Products</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>
  </nav>

  <div style="padding: 20px;">
    <h1>Responsive Navigation Demo</h1>
    <p>Resize your browser window to see the menu change from mobile to desktop layout.</p>
  </div>
</body>
</html>

JavaScript for Toggle Menu

javascript

// JavaScript to toggle mobile menu
document.querySelector('.menu-toggle').addEventListener('click', function() {
  document.querySelector('.nav-menu').classList.toggle('active');
  
  // Optional: Animate the hamburger icon to an X
  const bars = document.querySelectorAll('.bar');
  bars.forEach(bar => bar.classList.toggle('active'));
});

Pro Tip

When implementing responsive designs, use browser developer tools to test how your layout behaves at different screen sizes. Most browsers include a responsive design mode or device emulation feature that lets you preview your site on various device sizes.

Previous: CSS Grid Next: Animations And Transitions