Responsive Web Design

1) Meta Viewport (Required)

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

Ensures the browser matches the page width to the device width.

2) Mobile-First Media Queries

/* Base styles (phones first) */
.card { padding:12px; }

/* ≥576px (small tablets) */
@media (min-width: 576px){
  .card { padding:16px; }
}

/* ≥768px (tablets) */
@media (min-width: 768px){
  .card { padding:20px; display:flex; }
}

/* ≥992px (desktops) */
@media (min-width: 992px){
  .card { padding:24px; }
}

/* ≥1200px (large desktops) */
@media (min-width: 1200px){
  .card { padding:28px; }
}

4) Responsive Units

/* % scales with parent; vw/vh = viewport width/height; rem scales with root font */
.container { width:90%; max-width:1200px; margin:0 auto; }
.hero { min-height:60vh; padding:2rem; }
.title { font-size:2rem; }     /* ~32px if root is 16px */
.small { font-size:0.875rem; } /* ~14px */

5) Responsive Images (Simple)

img { max-width:100%; height:auto; }

Prevents images from overflowing their container.

6) srcset & sizes (Serve Right Image)

<img 
  src="../asset/img/sample-800.jpg" 
  srcset="../asset/img/sample-400.jpg 400w,
          ../asset/img/sample-800.jpg 800w,
          ../asset/img/sample-1200.jpg 1200w"
  sizes="(max-width: 600px) 90vw, 600px"
  alt="Responsive image demo">

The browser picks the most appropriate file based on screen size and DPR.

7) <picture> for Art Direction

<picture>
  <source media="(min-width: 992px)" srcset="../asset/img/hero-wide.jpg">
  <source media="(min-width: 600px)" srcset="../asset/img/hero-medium.jpg">
  <img src="../asset/img/hero-small.jpg" alt="Hero banner">
</picture>

8) Responsive Video / Iframe

<div class="video-wrapper">
  <iframe src="https://www.youtube.com/embed/eu2H94uP18s" 
          title="Responsive video" allowfullscreen></iframe>
</div>

9) Tips for Tables & Long Content

<div class="table-responsive">
  <table class="table table-bordered">...</table>
</div>

/* For code blocks or long urls, allow wrap/scroll */
pre { white-space: pre-wrap; word-wrap: break-word; }