Responsive Web Design Principles

Last updated: 2025-09-25 12:47:03

Responsive Web Design

Create websites that work perfectly on all devices using modern CSS techniques and responsive design principles.

CSS Grid Layout

/* Grid container */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  padding: 2rem;
}

/* Responsive grid with areas */
.layout {
  display: grid;
  grid-template-areas:
    "header header header"
    "nav main aside"
    "footer footer footer";
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

.header { grid-area: header; }
.nav { grid-area: nav; }
.main { grid-area: main; }
.aside { grid-area: aside; }
.footer { grid-area: footer; }

/* Mobile layout */
@media (max-width: 768px) {
  .layout {
    grid-template-areas:
      "header"
      "nav"
      "main"
      "aside"
      "footer";
    grid-template-columns: 1fr;
  }
}

Flexbox for Components

/* Flexible navigation */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 1rem;
}

.nav-links {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Card layout */
.card-container {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.card-content {
  flex: 1;
}

.card-actions {
  margin-top: auto;
  padding-top: 1rem;
}

Media Queries & Breakpoints

/* Mobile-first approach */
:root {
  --container-padding: 1rem;
  --font-size-base: 16px;
}

/* Base styles (mobile) */
.container {
  max-width: 100%;
  padding: 0 var(--container-padding);
}

/* Tablet styles */
@media (min-width: 768px) {
  :root {
    --container-padding: 2rem;
    --font-size-base: 18px;
  }
  
  .container {
    max-width: 750px;
    margin: 0 auto;
  }
}

/* Desktop styles */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
  }
  
  .hero-section {
    display: flex;
    align-items: center;
    min-height: 80vh;
  }
}

/* Large screens */
@media (min-width: 1440px) {
  .container {
    max-width: 1400px;
  }
}

Responsive Images

/* CSS responsive images */
.responsive-img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Art direction with picture element */
<picture>
  <source media="(min-width: 1024px)" srcset="hero-desktop.jpg">
  <source media="(min-width: 768px)" srcset="hero-tablet.jpg">
  <img src="hero-mobile.jpg" alt="Hero image" class="responsive-img">
</picture>

/* Responsive background images */
.hero {
  background-image: url('hero-mobile.jpg');
  background-size: cover;
  background-position: center;
  min-height: 50vh;
}

@media (min-width: 768px) {
  .hero {
    background-image: url('hero-desktop.jpg');
    min-height: 70vh;
  }
}

Modern CSS Features

/* Container queries (experimental) */
@container (min-width: 400px) {
  .card {
    display: flex;
    gap: 1rem;
  }
}

/* CSS custom properties for themes */
:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --spacing-unit: 8px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #0d6efd;
    --bg-color: #212529;
    --text-color: #f8f9fa;
  }
}

/* Fluid typography */
.title {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

/* Aspect ratio */
.video-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
}