Responsive Design & Media Queries

Responsive design ensures your website looks and works well on all devices — from large desktop monitors to small mobile phones. Instead of building separate websites for each device, you create a single site that adapts its layout, typography, and content based on the screen size.

---

Why Responsive Design Matters

Fact	Statistic
Mobile traffic	Over 60% of global web traffic comes from mobile devices
SEO	Google uses mobile-first indexing — it ranks mobile-friendly sites higher
User experience	Users leave sites that are hard to navigate on their device
Cost	One responsive site is cheaper to maintain than separate mobile and desktop versions

---

The Viewport Meta Tag

The viewport meta tag is essential for responsive design. Without it, mobile browsers render the page at desktop width and scale it down:

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

Property	Purpose
width=device-width	Sets the viewport width to the device screen width
initial-scale=1.0	Sets the initial zoom level to 100%

Important: Every responsive page must include this meta tag. Without it, media queries will not work as expected on mobile devices.

---

Fluid Layouts

Use relative units instead of fixed pixel values so elements scale with the viewport:

/* Fixed (not responsive) */
.container {
  width: 960px;
}

/* Fluid (responsive) */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

Relative Units for Responsive Design

Unit	Based On	Best For
%	Parent element	Widths, padding
vw / vh	Viewport width / height	Full-screen sections
rem	Root font size (16px by default)	Font sizes, spacing
em	Parent font size	Relative spacing within components
clamp()	Min, preferred, max	Fluid typography

Fluid Typography with clamp()

h1 {
  /* Minimum 1.5rem, preferred 4vw, maximum 3rem */
  font-size: clamp(1.5rem, 4vw, 3rem);
}

p {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
}

---

Media Queries

Media queries let you apply CSS rules only when specific conditions are met — typically based on screen width:

/* Base styles (mobile-first) */
.container {
  padding: 10px;
}

/* Tablets and up */
@media (min-width: 768px) {
  .container {
    padding: 20px;
  }
}

/* Desktops and up */
@media (min-width: 1024px) {
  .container {
    padding: 40px;
    max-width: 1200px;
    margin: 0 auto;
  }
}

Media Query Syntax

@media (condition) {
  /* CSS rules that apply when the condition is true */
}

Common Breakpoints

Breakpoint	Target
480px	Small phones
768px	Tablets
1024px	Small desktops / landscape tablets
1200px	Large desktops
1440px	Extra-large screens

Note: These are guidelines, not strict rules. Choose breakpoints based on where your design breaks, not based on specific devices.

Combining Conditions

/* Between 768px and 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
  .sidebar {
    display: none;
  }
}

/* Portrait orientation */
@media (orientation: portrait) {
  .hero {
    height: 50vh;
  }
}

/* Dark mode preference */
@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a1a1a;
    color: #eee;
  }
}