Responsive Design with Media Queries

Answer

Media queries allow you to apply CSS rules based on device characteristics like screen width, orientation, and resolution, enabling responsive designs that adapt to different devices.

Basic Syntax

@media (condition) {
	/* CSS rules */
}

/* Example */
@media (max-width: 768px) {
	.container {
		width: 100%;
		padding: 10px;
	}
}

Common Breakpoints

/* Common breakpoint system */
/* Mobile first approach */
:root {
	--breakpoint-sm: 576px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 992px;
	--breakpoint-xl: 1200px;
}

/* Mobile (default) */
.container {
	width: 100%;
}

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

/* Medium devices (tablets) */
@media (min-width: 768px) {
	.container {
		max-width: 720px;
	}
}

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

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

Mobile-First vs Desktop-First

/* Mobile-First (Recommended) */
/* Base styles for mobile */
.nav {
	flex-direction: column;
}

/* Add complexity for larger screens */
@media (min-width: 768px) {
	.nav {
		flex-direction: row;
	}
}

/* Desktop-First */
/* Base styles for desktop */
.nav {
	flex-direction: row;
}

/* Override for smaller screens */
@media (max-width: 767px) {
	.nav {
		flex-direction: column;
	}
}

Media Query Types

/* Width-based */
@media (min-width: 768px) {
}
@media (max-width: 767px) {
}
@media (min-width: 768px) and (max-width: 991px) {
}

/* Orientation */
@media (orientation: portrait) {
}
@media (orientation: landscape) {
}

/* Aspect ratio */
@media (aspect-ratio: 16/9) {
}
@media (min-aspect-ratio: 16/9) {
}

/* Resolution (for high-DPI screens) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	/* Retina/high-DPI styles */
}

/* Hover capability */
@media (hover: hover) {
	/* Device supports hover (mouse) */
	.button:hover {
		background: blue;
	}
}

@media (hover: none) {
	/* Touch devices */
}

/* Prefers color scheme */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #1a1a1a;
		--text: #f0f0f0;
	}
}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
		transition: none !important;
	}
}

Combining Conditions

/* AND */
@media (min-width: 768px) and (max-width: 991px) {
}

/* OR (comma-separated) */
@media (max-width: 767px), (orientation: portrait) {
}

/* NOT */
@media not all and (min-width: 768px) {
}

/* Complex */
@media (min-width: 768px) and (orientation: landscape) and (hover: hover) {
}

Responsive Patterns

Fluid Typography

/* Clamp for responsive font size */
h1 {
	font-size: clamp(1.5rem, 4vw, 3rem);
	/* Min 1.5rem, preferred 4vw, max 3rem */
}

/* Traditional approach */
h1 {
	font-size: 1.5rem;
}

@media (min-width: 768px) {
	h1 {
		font-size: 2rem;
	}
}

@media (min-width: 1200px) {
	h1 {
		font-size: 3rem;
	}
}

Responsive Grid

.grid {
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr; /* Mobile: 1 column */
}

@media (min-width: 576px) {
	.grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 992px) {
	.grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Or use auto-fill for automatic responsiveness */
.auto-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 20px;
}

Responsive Navigation

/* Mobile: hamburger menu */
.nav-links {
	display: none;
	position: fixed;
	top: 60px;
	left: 0;
	right: 0;
	flex-direction: column;
}

.nav-toggle {
	display: block;
}

.nav-links.active {
	display: flex;
}

/* Desktop: horizontal nav */
@media (min-width: 768px) {
	.nav-toggle {
		display: none;
	}

	.nav-links {
		display: flex;
		position: static;
		flex-direction: row;
	}
}

Hide/Show Elements

/* Hide on mobile */
.desktop-only {
	display: none;
}

@media (min-width: 768px) {
	.desktop-only {
		display: block;
	}
}

/* Hide on desktop */
.mobile-only {
	display: block;
}

@media (min-width: 768px) {
	.mobile-only {
		display: none;
	}
}

Container Queries (Modern)

/* Enable container queries on parent */
.card-container {
	container-type: inline-size;
	container-name: card;
}

/* Query based on container, not viewport */
@container card (min-width: 400px) {
	.card {
		display: flex;
		flex-direction: row;
	}
}

@container card (max-width: 399px) {
	.card {
		display: block;
	}
}

Testing Responsive Designs

1. Browser DevTools: Toggle device toolbar (Ctrl/Cmd + Shift + M)
2. Resize browser window: Manual testing
3. Real devices: Most accurate testing

Key Points

• Use mobile-first approach (min-width)
• Common breakpoints: 576px, 768px, 992px, 1200px
• Combine conditions with and, , (or)
• Use clamp() for fluid sizing
• Consider prefers-color-scheme and prefers-reduced-motion
• Container queries for component-level responsiveness