Master responsive web design with media queries, flexible units, mobile-first approach, and adaptive layouts that work beautifully across all devices.
Responsive design is the cornerstone of modern web development, ensuring websites look great and function perfectly on everything from smartphones to large desktop displays. It's about creating fluid, flexible interfaces that adapt to user needs and device capabilities rather than fixed layouts that break on different screens.
The responsive approach combines flexible layouts, scalable media, and CSS media queries to deliver optimal viewing experiences. This means easy reading, navigation, and minimal resizing or scrolling across devices. With mobile traffic dominating web usage, responsive design isn't just a nice feature—it's essential.
This lesson will give you complete mastery over responsive design principles, from mobile-first methodology to advanced viewport units, media queries, and flexible typography systems that create truly universal user experiences.
Media queries allow you to apply CSS styles based on device characteristics like screen width, height, orientation, and resolution.
Basic Media Query Syntax:
1/* Target screens 768px and wider */
2@media screen and (min-width: 768px) {
3 .container {
4 max-width: 750px;
5 margin: 0 auto;
6 }
7}
8
9/* Target screens between 768px and 1024px */
10@media screen and (min-width: 768px) and (max-width: 1024px) {
11 .sidebar {
12 width: 250px;
13 }
14}
15
16/* Target high-resolution displays */
17@media screen and (min-resolution: 192dpi) {
18 .logo {
19 background-image: url('logo-2x.png');
20 background-size: contain;
21 }
22}Common Breakpoint System:
1/* Mobile-first approach */
2/* Mobile styles (320px+) - default styles */
3.container {
4 width: 100%;
5 padding: 0 1rem;
6}
7
8/* Small tablets (576px+) */
9@media (min-width: 576px) {
10 .container {
11 max-width: 540px;
12 margin: 0 auto;
13 }
14}
15
16/* Tablets (768px+) */
17@media (min-width: 768px) {
18 .container {
19 max-width: 720px;
20 }
21
22 .grid {
23 display: grid;
24 grid-template-columns: repeat(2, 1fr);
25 gap: 2rem;
26 }
27}
28
29/* Desktop (992px+) */
30@media (min-width: 992px) {
31 .container {
32 max-width: 960px;
33 }
34
35 .grid {
36 grid-template-columns: repeat(3, 1fr);
37 }
38}
39
40/* Large desktop (1200px+) */
41@media (min-width: 1200px) {
42 .container {
43 max-width: 1140px;
44 }
45
46 .grid {
47 grid-template-columns: repeat(4, 1fr);
48 }
49}Orientation and Device-specific Queries:
1/* Portrait orientation */
2@media (orientation: portrait) {
3 .hero {
4 height: 60vh;
5 }
6}
7
8/* Landscape orientation */
9@media (orientation: landscape) {
10 .hero {
11 height: 80vh;
12 }
13}
14
15/* Touch devices */
16@media (pointer: coarse) {
17 .button {
18 min-height: 44px; /* Larger touch targets */
19 padding: 12px 24px;
20 }
21}
22
23/* Precise pointing devices */
24@media (pointer: fine) {
25 .button {
26 padding: 8px 16px; /* Smaller targets for mouse */
27 }
28
29 .button:hover {
30 background-color: #2563eb;
31 }
32}
33
34/* High contrast preference */
35@media (prefers-reduced-motion: reduce) {
36 * {
37 animation-duration: 0.01ms !important;
38 transition-duration: 0.01ms !important;
39 }
40}
41
42@media (prefers-color-scheme: dark) {
43 :root {
44 --bg-color: #1a1a1a;
45 --text-color: #ffffff;
46 }
47}Advanced Media Query Techniques:
1/* Container queries (future/progressive enhancement) */
2@container (min-width: 400px) {
3 .card {
4 display: flex;
5 flex-direction: row;
6 }
7}
8
9/* Feature detection */
10@supports (display: grid) {
11 .layout {
12 display: grid;
13 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
14 }
15}
16
17@supports not (display: grid) {
18 .layout {
19 display: flex;
20 flex-wrap: wrap;
21 }
22
23 .layout > * {
24 flex: 1 1 300px;
25 }
26}
27
28/* Print styles */
29@media print {
30 .header, .footer, .sidebar {
31 display: none;
32 }
33
34 .content {
35 width: 100% !important;
36 font-size: 12pt;
37 line-height: 1.5;
38 }
39
40 a[href]:after {
41 content: " (" attr(href) ")";
42 }
43}Flexible units create designs that scale proportionally with user preferences and device characteristics, providing better accessibility and adaptability.
Relative Length Units:
1/* em - relative to parent font size */
2.card {
3 padding: 1em; /* 16px if parent font-size is 16px */
4 margin-bottom: 1.5em; /* 24px if parent font-size is 16px */
5 border-radius: 0.5em; /* 8px if parent font-size is 16px */
6}
7
8.card h2 {
9 font-size: 1.5em; /* 1.5 × parent font size */
10 margin-bottom: 0.5em;
11}
12
13/* rem - relative to root font size */
14.container {
15 max-width: 75rem; /* 1200px if root font-size is 16px */
16 padding: 2rem; /* 32px if root font-size is 16px */
17}
18
19.section {
20 margin-bottom: 4rem; /* Always 64px regardless of parent */
21}
22
23/* Consistent spacing system using rem */
24:root {
25 --spacing-xs: 0.25rem; /* 4px */
26 --spacing-sm: 0.5rem; /* 8px */
27 --spacing-md: 1rem; /* 16px */
28 --spacing-lg: 2rem; /* 32px */
29 --spacing-xl: 4rem; /* 64px */
30}Viewport Units for Responsive Sizing:
1/* vw - viewport width percentage */
2.hero {
3 width: 100vw; /* Full viewport width */
4 height: 100vh; /* Full viewport height */
5 font-size: 4vw; /* Scales with viewport width */
6}
7
8/* Responsive typography with viewport units */
9.responsive-title {
10 font-size: clamp(2rem, 5vw, 4rem);
11 /* Min: 2rem, Preferred: 5vw, Max: 4rem */
12}
13
14/* vmin and vmax for aspect ratio considerations */
15.square-element {
16 width: 50vmin; /* 50% of smaller viewport dimension */
17 height: 50vmin; /* Always maintains square ratio */
18}
19
20.banner {
21 height: 25vmax; /* 25% of larger viewport dimension */
22}
23
24/* Practical viewport unit usage */
25.sidebar {
26 width: 25vw; /* 25% of viewport width */
27 max-width: 300px; /* But not larger than 300px */
28 min-width: 200px; /* And not smaller than 200px */
29}
30
31.content-width {
32 width: min(90vw, 1200px); /* Responsive container */
33 margin: 0 auto;
34}Percentage Units for Flexible Layouts:
1/* Fluid grid system */
2.row {
3 display: flex;
4 flex-wrap: wrap;
5 margin: 0 -1rem;
6}
7
8.col-1 { flex: 0 0 8.333333%; }
9.col-2 { flex: 0 0 16.666667%; }
10.col-3 { flex: 0 0 25%; }
11.col-4 { flex: 0 0 33.333333%; }
12.col-6 { flex: 0 0 50%; }
13.col-8 { flex: 0 0 66.666667%; }
14.col-12 { flex: 0 0 100%; }
15
16/* Responsive images */
17.responsive-img {
18 width: 100%; /* Full width of container */
19 height: auto; /* Maintain aspect ratio */
20 max-width: 100%; /* Never exceed container */
21}
22
23/* Fluid typography scaling */
24.fluid-type {
25 font-size: calc(1rem + 2vw);
26 line-height: calc(1.5em + 0.5vw);
27}CSS Mathematical Functions:
1/* clamp() for responsive sizing */
2.responsive-padding {
3 padding: clamp(1rem, 5vw, 3rem);
4 /* Minimum 1rem, preferred 5vw, maximum 3rem */
5}
6
7.responsive-gap {
8 gap: clamp(1rem, 3vw, 2rem);
9}
10
11/* min() and max() for constraints */
12.constrained-width {
13 width: min(90vw, 1200px); /* Smaller of 90vw or 1200px */
14 max-width: max(300px, 25vw); /* Larger of 300px or 25vw */
15}
16
17/* calc() for complex calculations */
18.sidebar-layout {
19 width: calc(100vw - 250px); /* Full width minus sidebar */
20 height: calc(100vh - 60px); /* Full height minus header */
21}
22
23.grid-with-gaps {
24 width: calc((100% - 2rem) / 3); /* Third width accounting for gaps */
25 margin-right: 1rem;
26}
27
28.grid-with-gaps:nth-child(3n) {
29 margin-right: 0;
30}Responsive Unit Best Practices:
1/* Use rem for consistent spacing */
2.component {
3 padding: 1rem 2rem;
4 margin-bottom: 2rem;
5 border-radius: 0.5rem;
6}
7
8/* Use em for component-relative sizing */
9.button {
10 font-size: 1rem;
11 padding: 0.5em 1em; /* Scales with font size */
12 border-radius: 0.25em;
13}
14
15.button--large {
16 font-size: 1.25rem; /* Padding scales automatically */
17}
18
19/* Use viewport units sparingly and with constraints */
20.hero-text {
21 font-size: clamp(2rem, 4vw, 3.5rem);
22 /* Prevents text from being too small or too large */
23}
24
25/* Combine units for optimal flexibility */
26.flexible-container {
27 width: min(90vw, 1200px); /* Responsive with maximum */
28 padding: clamp(1rem, 5vw, 3rem); /* Scales with viewport */
29 margin: 2rem auto; /* Consistent margin */
30}Mobile-first design starts with mobile styles and progressively enhances for larger screens, resulting in better performance and user experience.
Mobile-First CSS Structure:
1/* Base mobile styles (320px+) */
2.container {
3 width: 100%;
4 padding: 0 1rem;
5 margin: 0 auto;
6}
7
8.header {
9 padding: 1rem 0;
10 text-align: center;
11}
12
13.navigation {
14 display: none; /* Hide complex nav on mobile */
15}
16
17.mobile-menu {
18 display: block; /* Show mobile menu instead */
19 background: #333;
20 color: white;
21 padding: 1rem;
22 border: none;
23 width: 100%;
24}
25
26.grid {
27 display: block; /* Stack items on mobile */
28}
29
30.grid-item {
31 margin-bottom: 2rem;
32}
33
34/* Small devices (576px+) */
35@media (min-width: 576px) {
36 .container {
37 max-width: 540px;
38 }
39
40 .header {
41 text-align: left;
42 display: flex;
43 justify-content: space-between;
44 align-items: center;
45 }
46}
47
48/* Medium devices (768px+) */
49@media (min-width: 768px) {
50 .container {
51 max-width: 720px;
52 }
53
54 .navigation {
55 display: flex; /* Show full navigation */
56 gap: 2rem;
57 }
58
59 .mobile-menu {
60 display: none; /* Hide mobile menu */
61 }
62
63 .grid {
64 display: grid;
65 grid-template-columns: repeat(2, 1fr);
66 gap: 2rem;
67 }
68
69 .grid-item {
70 margin-bottom: 0;
71 }
72}
73
74/* Large devices (992px+) */
75@media (min-width: 992px) {
76 .container {
77 max-width: 960px;
78 }
79
80 .grid {
81 grid-template-columns: repeat(3, 1fr);
82 }
83}
84
85/* Extra large devices (1200px+) */
86@media (min-width: 1200px) {
87 .container {
88 max-width: 1140px;
89 }
90
91 .grid {
92 grid-template-columns: repeat(4, 1fr);
93 }
94}Progressive Enhancement Patterns:
1/* Start with basic, functional styles */
2.card {
3 background: white;
4 border: 1px solid #e0e0e0;
5 padding: 1rem;
6 margin-bottom: 1rem;
7}
8
9/* Enhance for touch devices */
10@media (pointer: coarse) {
11 .card {
12 padding: 1.5rem; /* More touch-friendly spacing */
13 margin-bottom: 1.5rem;
14 }
15
16 .card-button {
17 min-height: 44px; /* Accessible touch target */
18 font-size: 1.1rem;
19 }
20}
21
22/* Enhance for larger screens */
23@media (min-width: 768px) {
24 .card {
25 border-radius: 8px;
26 box-shadow: 0 2px 10px rgba(0,0,0,0.1);
27 transition: transform 0.2s ease;
28 }
29
30 .card:hover {
31 transform: translateY(-2px);
32 box-shadow: 0 4px 20px rgba(0,0,0,0.15);
33 }
34}
35
36/* Enhance for high-resolution displays */
37@media (min-resolution: 192dpi) {
38 .card-image {
39 background-image: url('card-bg-2x.jpg');
40 background-size: cover;
41 }
42}Content-First Responsive Strategy:
1/* Content determines breakpoints, not device sizes */
2.article {
3 max-width: 100%;
4 margin: 0 auto;
5 padding: 1rem;
6 line-height: 1.6;
7}
8
9/* When text becomes hard to read (usually ~65-75 characters) */
10@media (min-width: 640px) {
11 .article {
12 max-width: 65ch; /* Optimal reading line length */
13 padding: 2rem;
14 }
15}
16
17/* When sidebar can fit comfortably */
18@media (min-width: 900px) {
19 .article-layout {
20 display: grid;
21 grid-template-columns: 1fr 250px;
22 gap: 3rem;
23 }
24}
25
26/* Component-based responsive design */
27.component {
28 padding: 1rem;
29}
30
31/* Component needs more space */
32@media (min-width: 480px) {
33 .component {
34 padding: 2rem;
35 display: flex;
36 align-items: center;
37 gap: 1rem;
38 }
39}
40
41/* Component can be more complex */
42@media (min-width: 768px) {
43 .component {
44 padding: 3rem;
45 border-radius: 12px;
46 box-shadow: 0 4px 20px rgba(0,0,0,0.1);
47 }
48}Mobile Performance Optimizations:
1/* Optimize for mobile performance */
2.mobile-optimized {
3 /* Avoid expensive properties on mobile */
4 transform: translateZ(0); /* Hardware acceleration */
5 will-change: transform; /* Hint to browser */
6}
7
8@media (min-width: 768px) {
9 .mobile-optimized {
10 /* Add fancy effects for larger screens */
11 box-shadow: 0 10px 30px rgba(0,0,0,0.1);
12 backdrop-filter: blur(10px);
13 border-radius: 16px;
14 will-change: auto; /* Remove hint when not needed */
15 }
16}
17
18/* Conditional loading of heavy styles */
19@media (min-width: 768px) and (min-resolution: 192dpi) {
20 .high-res-background {
21 background-image:
22 url('hero-desktop-2x.jpg'),
23 linear-gradient(135deg, #667eea 0%, #764ba2 100%);
24 }
25}
26
27/* Optimize animations for mobile */
28@media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
29 .fancy-animation {
30 animation: slideIn 0.6s ease-out;
31 }
32}
33
34@keyframes slideIn {
35 from {
36 opacity: 0;
37 transform: translateY(30px);
38 }
39 to {
40 opacity: 1;
41 transform: translateY(0);
42 }
43}Create adaptive typography and media that scales beautifully across all devices while maintaining readability and performance.
Responsive Typography Systems:
1/* Fluid typography scale */
2:root {
3 --font-size-sm: clamp(0.8rem, 0.17vw + 0.76rem, 0.89rem);
4 --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
5 --font-size-lg: clamp(1.25rem, 0.61vw + 1.1rem, 1.58rem);
6 --font-size-xl: clamp(1.56rem, 1vw + 1.31rem, 2.11rem);
7 --font-size-xxl: clamp(1.95rem, 1.56vw + 1.56rem, 2.81rem);
8 --font-size-xxxl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
9}
10
11.heading-1 { font-size: var(--font-size-xxxl); }
12.heading-2 { font-size: var(--font-size-xxl); }
13.heading-3 { font-size: var(--font-size-xl); }
14.heading-4 { font-size: var(--font-size-lg); }
15.body-large { font-size: var(--font-size-lg); }
16.body-base { font-size: var(--font-size-base); }
17.body-small { font-size: var(--font-size-sm); }
18
19/* Responsive line height */
20.text {
21 line-height: calc(1.5em + 0.2vw);
22 max-width: 65ch; /* Optimal reading width */
23}
24
25/* Context-sensitive typography */
26@media (max-width: 767px) {
27 .mobile-text {
28 font-size: 1.1rem; /* Slightly larger for mobile */
29 line-height: 1.6; /* More breathing room */
30 }
31}
32
33@media (min-width: 1200px) {
34 .desktop-text {
35 font-size: 1.125rem; /* Refined for large screens */
36 line-height: 1.7;
37 }
38}Responsive Images and Media:
1/* Basic responsive images */
2.responsive-image {
3 width: 100%;
4 height: auto;
5 max-width: 100%;
6}
7
8/* Art direction with picture element */
9.hero-image {
10 width: 100%;
11 height: auto;
12 object-fit: cover;
13}
14
15/* CSS for picture element usage */
16/*
17<picture>
18 <source media="(min-width: 768px)" srcset="hero-desktop.jpg">
19 <source media="(min-width: 480px)" srcset="hero-tablet.jpg">
20 <img src="hero-mobile.jpg" alt="Hero image" class="hero-image">
21</picture>
22*/
23
24/* Responsive background images */
25.hero-section {
26 background-image: url('hero-mobile.jpg');
27 background-size: cover;
28 background-position: center;
29 min-height: 60vh;
30}
31
32@media (min-width: 768px) {
33 .hero-section {
34 background-image: url('hero-tablet.jpg');
35 min-height: 70vh;
36 }
37}
38
39@media (min-width: 1200px) {
40 .hero-section {
41 background-image: url('hero-desktop.jpg');
42 min-height: 80vh;
43 }
44}
45
46/* High-density display support */
47@media (min-resolution: 192dpi) {
48 .hero-section {
49 background-image: url('hero-mobile-2x.jpg');
50 }
51}
52
53@media (min-width: 768px) and (min-resolution: 192dpi) {
54 .hero-section {
55 background-image: url('hero-tablet-2x.jpg');
56 }
57}Advanced Responsive Layout Patterns:
1/* Intrinsic web design patterns */
2.intrinsic-grid {
3 display: grid;
4 grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
5 gap: clamp(1rem, 3vw, 2rem);
6}
7
8/* Responsive sidebar pattern */
9.sidebar-layout {
10 display: grid;
11 gap: 2rem;
12 grid-template-areas:
13 "main"
14 "sidebar";
15}
16
17@media (min-width: 768px) {
18 .sidebar-layout {
19 grid-template-columns: 1fr 300px;
20 grid-template-areas: "main sidebar";
21 }
22}
23
24/* RAM (Repeat, Auto, Minmax) pattern */
25.ram-grid {
26 display: grid;
27 grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
28 gap: 1rem;
29}
30
31/* Pancake stack pattern */
32.pancake-stack {
33 display: grid;
34 grid-template-rows: auto 1fr auto;
35 min-height: 100vh;
36}
37
38/* Holy grail responsive pattern */
39.holy-grail {
40 display: grid;
41 grid-template-areas:
42 "header"
43 "main"
44 "nav"
45 "aside"
46 "footer";
47 gap: 1rem;
48}
49
50@media (min-width: 768px) {
51 .holy-grail {
52 grid-template-columns: 200px 1fr 150px;
53 grid-template-areas:
54 "header header header"
55 "nav main aside"
56 "footer footer footer";
57 }
58}Performance and Accessibility Considerations:
1/* Respect user preferences */
2@media (prefers-reduced-motion: reduce) {
3 *,
4 *::before,
5 *::after {
6 animation-duration: 0.01ms !important;
7 animation-iteration-count: 1 !important;
8 transition-duration: 0.01ms !important;
9 scroll-behavior: auto !important;
10 }
11}
12
13@media (prefers-contrast: high) {
14 .card {
15 border: 2px solid #000;
16 background: #fff;
17 color: #000;
18 }
19}
20
21/* Efficient responsive loading */
22@media (min-width: 768px) {
23 .desktop-only {
24 /* Load expensive styles only on larger screens */
25 background-attachment: fixed;
26 background-blend-mode: overlay;
27 backdrop-filter: blur(5px);
28 }
29}
30
31/* Touch-optimized responsive design */
32@media (pointer: coarse) {
33 .touch-optimized {
34 min-height: 44px; /* Accessible touch target */
35 padding: 0.75rem 1rem;
36 }
37
38 .hover-effect {
39 /* Remove hover states on touch devices */
40 }
41}
42
43@media (pointer: fine) {
44 .hover-effect:hover {
45 transform: scale(1.05);
46 box-shadow: 0 8px 25px rgba(0,0,0,0.15);
47 }
48}
49
50/* Container-based responsive (future) */
51@container (min-width: 400px) {
52 .card {
53 display: flex;
54 flex-direction: row;
55 }
56}
57
58@container (min-width: 600px) {
59 .card {
60 border-radius: 12px;
61 padding: 2rem;
62 }
63}A comprehensive demonstration of responsive design with media queries, flexible units, mobile-first approach, and adaptive layouts for all devices.
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Responsive Design Mastery</title>
7 <style>
8 /* CSS Reset and base styles */
9 * {
10 margin: 0;
11 padding: 0;
12 box-sizing: border-box;
13 }
14
15 /* Root variables for consistent design system */
16 :root {
17 /* Responsive font scale */
18 --font-size-sm: clamp(0.8rem, 0.17vw + 0.76rem, 0.89rem);
19 --font-size-base: clamp(1rem, 0.34vw + 0.91rem, 1.19rem);
20 --font-size-lg: clamp(1.25rem, 0.61vw + 1.1rem, 1.58rem);
21 --font-size-xl: clamp(1.56rem, 1vw + 1.31rem, 2.11rem);
22 --font-size-xxl: clamp(1.95rem, 1.56vw + 1.56rem, 2.81rem);
23 --font-size-xxxl: clamp(2.44rem, 2.38vw + 1.85rem, 3.75rem);
24
25 /* Responsive spacing */
26 --spacing-xs: clamp(0.25rem, 0.5vw, 0.5rem);
27 --spacing-sm: clamp(0.5rem, 1vw, 1rem);
28 --spacing-md: clamp(1rem, 2vw, 2rem);
29 --spacing-lg: clamp(2rem, 4vw, 4rem);
30 --spacing-xl: clamp(3rem, 6vw, 6rem);
31
32 /* Color system */
33 --primary: #3b82f6;
34 --primary-dark: #1e40af;
35 --secondary: #10b981;
36 --accent: #f59e0b;
37 --text-primary: #1e293b;
38 --text-secondary: #64748b;
39 --bg-primary: #ffffff;
40 --bg-secondary: #f8fafc;
41 --border: #e2e8f0;
42 }
43
44 /* Dark mode support */
45 @media (prefers-color-scheme: dark) {
46 :root {
47 --text-primary: #f1f5f9;
48 --text-secondary: #cbd5e1;
49 --bg-primary: #1e293b;
50 --bg-secondary: #0f172a;
51 --border: #334155;
52 }
53 }
54
55 /* Base typography - mobile first */
56 body {
57 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
58 line-height: 1.6;
59 color: var(--text-primary);
60 background: var(--bg-secondary);
61 font-size: var(--font-size-base);
62 }
63
64 /* Responsive container system */
65 .container {
66 width: 100%;
67 padding: 0 var(--spacing-sm);
68 margin: 0 auto;
69 }
70
71 /* Progressive container widths */
72 @media (min-width: 576px) {
73 .container {
74 max-width: 540px;
75 padding: 0 var(--spacing-md);
76 }
77 }
78
79 @media (min-width: 768px) {
80 .container {
81 max-width: 720px;
82 }
83 }
84
85 @media (min-width: 992px) {
86 .container {
87 max-width: 960px;
88 }
89 }
90
91 @media (min-width: 1200px) {
92 .container {
93 max-width: 1140px;
94 }
95 }
96
97 /* Mobile-first navigation */
98 .header {
99 background: var(--bg-primary);
100 border-bottom: 1px solid var(--border);
101 padding: var(--spacing-sm) 0;
102 position: sticky;
103 top: 0;
104 z-index: 1000;
105 box-shadow: 0 2px 10px rgba(0,0,0,0.1);
106 }
107
108 .nav {
109 display: flex;
110 justify-content: space-between;
111 align-items: center;
112 flex-wrap: wrap;
113 }
114
115 .nav-brand {
116 font-size: var(--font-size-lg);
117 font-weight: 700;
118 color: var(--primary);
119 text-decoration: none;
120 }
121
122 /* Mobile menu toggle */
123 .nav-toggle {
124 display: block;
125 background: none;
126 border: none;
127 font-size: 1.5rem;
128 cursor: pointer;
129 color: var(--text-primary);
130 }
131
132 /* Mobile navigation menu */
133 .nav-menu {
134 display: none;
135 width: 100%;
136 flex-direction: column;
137 background: var(--bg-primary);
138 border-top: 1px solid var(--border);
139 margin-top: var(--spacing-sm);
140 padding-top: var(--spacing-sm);
141 }
142
143 .nav-menu.active {
144 display: flex;
145 }
146
147 .nav-menu a {
148 color: var(--text-primary);
149 text-decoration: none;
150 padding: var(--spacing-sm);
151 border-radius: 8px;
152 transition: all 0.3s ease;
153 }
154
155 /* Tablet and desktop navigation */
156 @media (min-width: 768px) {
157 .nav-toggle {
158 display: none;
159 }
160
161 .nav-menu {
162 display: flex !important;
163 width: auto;
164 flex-direction: row;
165 background: none;
166 border: none;
167 margin: 0;
168 padding: 0;
169 gap: var(--spacing-sm);
170 }
171
172 .nav-menu a:hover {
173 background: var(--primary);
174 color: white;
175 }
176 }
177
178 /* Responsive hero section */
179 .hero {
180 background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
181 color: white;
182 padding: var(--spacing-lg) 0;
183 text-align: center;
184 min-height: 60vh;
185 display: flex;
186 align-items: center;
187 }
188
189 .hero-content h1 {
190 font-size: var(--font-size-xxxl);
191 font-weight: 700;
192 margin-bottom: var(--spacing-sm);
193 line-height: 1.2;
194 }
195
196 .hero-content p {
197 font-size: var(--font-size-lg);
198 margin-bottom: var(--spacing-md);
199 max-width: 600px;
200 margin-left: auto;
201 margin-right: auto;
202 opacity: 0.95;
203 }
204
205 /* Tablet hero adjustments */
206 @media (min-width: 768px) {
207 .hero {
208 min-height: 70vh;
209 text-align: left;
210 }
211
212 .hero-grid {
213 display: grid;
214 grid-template-columns: 1fr 1fr;
215 gap: var(--spacing-lg);
216 align-items: center;
217 }
218
219 .hero-content h1,
220 .hero-content p {
221 margin-left: 0;
222 margin-right: 0;
223 }
224
225 .hero-visual {
226 display: grid;
227 grid-template-columns: repeat(2, 1fr);
228 gap: var(--spacing-sm);
229 }
230
231 .hero-icon {
232 width: 80px;
233 height: 80px;
234 background: rgba(255,255,255,0.2);
235 border-radius: 12px;
236 display: flex;
237 align-items: center;
238 justify-content: center;
239 font-size: 2rem;
240 }
241 }
242
243 /* Desktop hero enhancements */
244 @media (min-width: 1200px) {
245 .hero {
246 min-height: 80vh;
247 }
248
249 .hero-visual {
250 grid-template-columns: repeat(3, 1fr);
251 }
252 }
253
254 /* Responsive button system */
255 .btn {
256 display: inline-flex;
257 align-items: center;
258 justify-content: center;
259 padding: var(--spacing-sm) var(--spacing-md);
260 border: 2px solid var(--primary);
261 background: var(--primary);
262 color: white;
263 text-decoration: none;
264 border-radius: 8px;
265 font-weight: 600;
266 font-size: var(--font-size-base);
267 transition: all 0.3s ease;
268 min-height: 44px; /* Touch-friendly size */
269 }
270
271 .btn:hover {
272 background: var(--primary-dark);
273 border-color: var(--primary-dark);
274 transform: translateY(-2px);
275 }
276
277 .btn--secondary {
278 background: transparent;
279 color: var(--primary);
280 }
281
282 .btn--secondary:hover {
283 background: var(--primary);
284 color: white;
285 }
286
287 /* Touch device optimizations */
288 @media (pointer: coarse) {
289 .btn {
290 min-height: 48px;
291 padding: var(--spacing-md) var(--spacing-lg);
292 }
293 }
294
295 /* Section spacing system */
296 .section {
297 padding: var(--spacing-lg) 0;
298 }
299
300 .section-title {
301 font-size: var(--font-size-xxl);
302 text-align: center;
303 margin-bottom: var(--spacing-lg);
304 color: var(--text-primary);
305 }
306
307 /* Responsive grid system */
308 .responsive-grid {
309 display: grid;
310 gap: var(--spacing-md);
311 margin-bottom: var(--spacing-lg);
312 }
313
314 /* Mobile: single column */
315 .responsive-grid {
316 grid-template-columns: 1fr;
317 }
318
319 /* Tablet: two columns */
320 @media (min-width: 768px) {
321 .responsive-grid {
322 grid-template-columns: repeat(2, 1fr);
323 }
324 }
325
326 /* Desktop: three columns */
327 @media (min-width: 992px) {
328 .responsive-grid {
329 grid-template-columns: repeat(3, 1fr);
330 }
331 }
332
333 /* Auto-fit responsive grid */
334 .auto-grid {
335 display: grid;
336 grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
337 gap: var(--spacing-md);
338 }
339
340 /* Card component with responsive features */
341 .card {
342 background: var(--bg-primary);
343 border-radius: 12px;
344 padding: var(--spacing-md);
345 box-shadow: 0 4px 20px rgba(0,0,0,0.08);
346 border: 1px solid var(--border);
347 transition: all 0.3s ease;
348 display: flex;
349 flex-direction: column;
350 }
351
352 .card:hover {
353 transform: translateY(-4px);
354 box-shadow: 0 12px 40px rgba(0,0,0,0.15);
355 }
356
357 .card-header {
358 display: flex;
359 align-items: flex-start;
360 gap: var(--spacing-sm);
361 margin-bottom: var(--spacing-sm);
362 }
363
364 .card-icon {
365 width: 50px;
366 height: 50px;
367 border-radius: 10px;
368 display: flex;
369 align-items: center;
370 justify-content: center;
371 font-size: 1.5rem;
372 flex-shrink: 0;
373 }
374
375 .card-title {
376 font-size: var(--font-size-lg);
377 font-weight: 600;
378 color: var(--text-primary);
379 margin-bottom: 0.5rem;
380 }
381
382 .card-content {
383 color: var(--text-secondary);
384 margin-bottom: var(--spacing-md);
385 flex: 1;
386 }
387
388 .card-footer {
389 margin-top: auto;
390 padding-top: var(--spacing-sm);
391 border-top: 1px solid var(--border);
392 }
393
394 /* Responsive sidebar layout */
395 .layout-with-sidebar {
396 display: grid;
397 gap: var(--spacing-md);
398 /* Mobile: stacked layout */
399 grid-template-areas:
400 "main"
401 "sidebar";
402 }
403
404 @media (min-width: 768px) {
405 .layout-with-sidebar {
406 /* Desktop: side-by-side layout */
407 grid-template-columns: 1fr 300px;
408 grid-template-areas: "main sidebar";
409 }
410 }
411
412 .main-content {
413 grid-area: main;
414 background: var(--bg-primary);
415 border-radius: 16px;
416 padding: var(--spacing-lg);
417 border: 1px solid var(--border);
418 }
419
420 .sidebar {
421 grid-area: sidebar;
422 }
423
424 .sidebar-item {
425 background: var(--bg-primary);
426 border-radius: 12px;
427 padding: var(--spacing-md);
428 margin-bottom: var(--spacing-sm);
429 border: 1px solid var(--border);
430 }
431
432 /* Responsive typography examples */
433 .responsive-text {
434 font-size: var(--font-size-base);
435 line-height: 1.7;
436 max-width: 65ch; /* Optimal reading width */
437 margin: 0 auto var(--spacing-md);
438 }
439
440 .display-text {
441 font-size: var(--font-size-xxxl);
442 font-weight: 700;
443 line-height: 1.1;
444 margin-bottom: var(--spacing-sm);
445 }
446
447 /* Responsive image container */
448 .responsive-image {
449 width: 100%;
450 height: auto;
451 border-radius: 12px;
452 box-shadow: 0 8px 30px rgba(0,0,0,0.12);
453 }
454
455 /* Media query examples section */
456 .breakpoint-demo {
457 background: var(--bg-primary);
458 border-radius: 16px;
459 padding: var(--spacing-lg);
460 margin-bottom: var(--spacing-md);
461 border: 1px solid var(--border);
462 text-align: center;
463 }
464
465 .breakpoint-indicator {
466 font-size: var(--font-size-xl);
467 font-weight: 700;
468 color: var(--primary);
469 margin-bottom: var(--spacing-sm);
470 }
471
472 /* Breakpoint-specific styles for demonstration */
473 .breakpoint-demo::after {
474 content: "📱 Mobile (< 576px)";
475 display: block;
476 font-size: var(--font-size-lg);
477 color: var(--secondary);
478 font-weight: 600;
479 }
480
481 @media (min-width: 576px) {
482 .breakpoint-demo::after {
483 content: "📱 Small Tablet (≥ 576px)";
484 }
485 }
486
487 @media (min-width: 768px) {
488 .breakpoint-demo::after {
489 content: "💻 Tablet (≥ 768px)";
490 }
491 }
492
493 @media (min-width: 992px) {
494 .breakpoint-demo::after {
495 content: "🖥️ Desktop (≥ 992px)";
496 }
497 }
498
499 @media (min-width: 1200px) {
500 .breakpoint-demo::after {
501 content: "🖥️ Large Desktop (≥ 1200px)";
502 }
503 }
504
505 /* Footer */
506 .footer {
507 background: var(--text-primary);
508 color: var(--bg-primary);
509 padding: var(--spacing-lg) 0;
510 text-align: center;
511 }
512
513 .footer-grid {
514 display: grid;
515 gap: var(--spacing-md);
516 grid-template-columns: 1fr;
517 }
518
519 @media (min-width: 768px) {
520 .footer-grid {
521 grid-template-columns: repeat(3, 1fr);
522 text-align: left;
523 }
524 }
525
526 /* Accessibility and user preference support */
527 @media (prefers-reduced-motion: reduce) {
528 *,
529 *::before,
530 *::after {
531 animation-duration: 0.01ms !important;
532 animation-iteration-count: 1 !important;
533 transition-duration: 0.01ms !important;
534 }
535 }
536
537 @media (prefers-contrast: high) {
538 :root {
539 --border: #000000;
540 }
541
542 .card {
543 border: 2px solid var(--border);
544 }
545 }
546
547 /* Print styles */
548 @media print {
549 .header,
550 .nav-toggle,
551 .btn,
552 .footer {
553 display: none !important;
554 }
555
556 .hero {
557 background: none !important;
558 color: black !important;
559 min-height: auto !important;
560 }
561
562 .card {
563 break-inside: avoid;
564 box-shadow: none !important;
565 border: 1px solid #000 !important;
566 }
567 }
568
569 /* Animation utilities */
570 .fade-in {
571 animation: fadeIn 0.6s ease-out forwards;
572 }
573
574 @keyframes fadeIn {
575 from {
576 opacity: 0;
577 transform: translateY(20px);
578 }
579 to {
580 opacity: 1;
581 transform: translateY(0);
582 }
583 }
584
585 /* High contrast support */
586 @media (prefers-contrast: high) {
587 .btn {
588 border: 3px solid;
589 }
590 }
591 </style>
592</head>
593<body>
594 <!-- Responsive Header with Mobile Navigation -->
595 <header class="header">
596 <div class="container">
597 <nav class="nav">
598 <a href="#" class="nav-brand">🎯 Responsive Master</a>
599
600 <button class="nav-toggle" onclick="toggleMenu()" aria-label="Toggle navigation">
601 ☰
602 </button>
603
604 <div class="nav-menu" id="navMenu">
605 <a href="#responsive">Responsive</a>
606 <a href="#mobile-first">Mobile First</a>
607 <a href="#breakpoints">Breakpoints</a>
608 <a href="#flexible">Flexible Units</a>
609 <a href="#examples">Examples</a>
610 </div>
611 </nav>
612 </div>
613 </header>
614
615 <!-- Responsive Hero Section -->
616 <section class="hero">
617 <div class="container">
618 <div class="hero-grid">
619 <div class="hero-content fade-in">
620 <h1>Master Responsive Design</h1>
621 <p>Create beautiful, adaptive layouts that work perfectly on every device. Learn mobile-first design, flexible units, and modern responsive techniques.</p>
622 <div style="display: flex; gap: var(--spacing-sm); flex-wrap: wrap; justify-content: center;">
623 <a href="#responsive" class="btn">Start Learning</a>
624 <a href="#examples" class="btn btn--secondary">See Examples</a>
625 </div>
626 </div>
627
628 <div class="hero-visual" style="display: none;">
629 <div class="hero-icon">📱</div>
630 <div class="hero-icon">💻</div>
631 <div class="hero-icon">🖥️</div>
632 </div>
633 </div>
634 </div>
635 </section>
636
637 <!-- Current Breakpoint Indicator -->
638 <section class="section">
639 <div class="container">
640 <div class="breakpoint-demo fade-in">
641 <div class="breakpoint-indicator">Current Viewport</div>
642 <p>Resize your browser window to see how the breakpoint changes!</p>
643 </div>
644 </div>
645 </section>
646
647 <!-- Responsive Grid Examples -->
648 <section id="responsive" class="section">
649 <div class="container">
650 <h2 class="section-title">📐 Responsive Grid System</h2>
651
652 <p class="responsive-text fade-in">
653 This grid automatically adapts: 1 column on mobile, 2 columns on tablets, and 3 columns on desktop.
654 The layout changes are handled entirely by CSS media queries with a mobile-first approach.
655 </p>
656
657 <div class="responsive-grid">
658 <div class="card fade-in">
659 <div class="card-header">
660 <div class="card-icon" style="background: linear-gradient(135deg, #3b82f6, #1e40af); color: white;">📱</div>
661 <div>
662 <div class="card-title">Mobile First</div>
663 </div>
664 </div>
665 <div class="card-content">
666 Start with mobile styles as the base, then progressively enhance for larger screens. This approach ensures optimal performance and user experience.
667 </div>
668 <div class="card-footer">
669 <a href="#mobile-first" class="btn" style="width: 100%;">Learn Mobile-First</a>
670 </div>
671 </div>
672
673 <div class="card fade-in">
674 <div class="card-header">
675 <div class="card-icon" style="background: linear-gradient(135deg, #10b981, #047857); color: white;">📏</div>
676 <div>
677 <div class="card-title">Flexible Units</div>
678 </div>
679 </div>
680 <div class="card-content">
681 Use rem, em, vw, vh, and clamp() for scalable designs that adapt to user preferences and screen sizes without breaking.
682 </div>
683 <div class="card-footer">
684 <a href="#flexible" class="btn" style="width: 100%;">Explore Units</a>
685 </div>
686 </div>
687
688 <div class="card fade-in">
689 <div class="card-header">
690 <div class="card-icon" style="background: linear-gradient(135deg, #f59e0b, #d97706); color: white;">🎯</div>
691 <div>
692 <div class="card-title">Smart Breakpoints</div>
693 </div>
694 </div>
695 <div class="card-content">
696 Choose breakpoints based on content needs, not specific device sizes. Create layouts that adapt naturally to any screen.
697 </div>
698 <div class="card-footer">
699 <a href="#breakpoints" class="btn" style="width: 100%;">See Breakpoints</a>
700 </div>
701 </div>
702 </div>
703 </div>
704 </section>
705
706 <!-- Auto-fit Grid Example -->
707 <section class="section" style="background: var(--bg-primary);">
708 <div class="container">
709 <h2 class="section-title">🔄 Auto-Fit Responsive Grid</h2>
710
711 <p class="responsive-text fade-in">
712 This grid uses <code>repeat(auto-fit, minmax(300px, 1fr))</code> to automatically create as many columns as fit,
713 with each column being at least 300px wide. No media queries required!
714 </p>
715
716 <div class="auto-grid">
717 <div class="card fade-in">
718 <div class="card-header">
719 <div class="card-icon" style="background: linear-gradient(135deg, #8b5cf6, #7c3aed); color: white;">⚡</div>
720 <div>
721 <div class="card-title">No Media Queries</div>
722 </div>
723 </div>
724 <div class="card-content">
725 Auto-fit grids respond to screen size changes without any media queries, creating truly intrinsic responsive layouts.
726 </div>
727 </div>
728
729 <div class="card fade-in">
730 <div class="card-header">
731 <div class="card-icon" style="background: linear-gradient(135deg, #ef4444, #dc2626); color: white;">📦</div>
732 <div>
733 <div class="card-title">Content-Based</div>
734 </div>
735 </div>
736 <div class="card-content">
737 The grid adapts based on available space and content requirements, creating optimal layouts automatically.
738 </div>
739 </div>
740
741 <div class="card fade-in">
742 <div class="card-header">
743 <div class="card-icon" style="background: linear-gradient(135deg, #06b6d4, #0891b2); color: white;">🌊</div>
744 <div>
745 <div class="card-title">Fluid Behavior</div>
746 </div>
747 </div>
748 <div class="card-content">
749 Items flow naturally into available space, maintaining consistent sizing while adapting to container width.
750 </div>
751 </div>
752
753 <div class="card fade-in">
754 <div class="card-header">
755 <div class="card-icon" style="background: linear-gradient(135deg, #ec4899, #db2777); color: white;">🎨</div>
756 <div>
757 <div class="card-title">Perfect Spacing</div>
758 </div>
759 </div>
760 <div class="card-content">
761 Gap property ensures consistent spacing between items regardless of how many fit in each row.
762 </div>
763 </div>
764 </div>
765 </div>
766 </section>
767
768 <!-- Sidebar Layout Example -->
769 <section id="mobile-first" class="section">
770 <div class="container">
771 <h2 class="section-title">📱 Mobile-First Layout</h2>
772
773 <div class="layout-with-sidebar fade-in">
774 <article class="main-content">
775 <h3 style="margin-bottom: var(--spacing-sm); font-size: var(--font-size-xl);">The Mobile-First Approach</h3>
776 <p style="margin-bottom: var(--spacing-sm); color: var(--text-secondary);">
777 Mobile-first design means starting with the mobile experience and progressively enhancing for larger screens.
778 This approach ensures that your core content and functionality work well on the most constrained devices first.
779 </p>
780
781 <h4 style="margin-bottom: var(--spacing-xs); font-size: var(--font-size-lg); color: var(--primary);">Key Benefits:</h4>
782 <ul style="margin-bottom: var(--spacing-md); padding-left: var(--spacing-md); color: var(--text-secondary);">
783 <li>Better performance on mobile devices</li>
784 <li>Forces focus on essential content first</li>
785 <li>Progressive enhancement creates robust designs</li>
786 <li>Future-proof approach for new device sizes</li>
787 </ul>
788
789 <p style="color: var(--text-secondary);">
790 On mobile, this sidebar appears below the main content. On larger screens, it moves to the side.
791 The layout transformation is handled automatically by CSS Grid and media queries.
792 </p>
793 </article>
794
795 <aside class="sidebar">
796 <div class="sidebar-item fade-in">
797 <h4 style="margin-bottom: var(--spacing-xs); color: var(--primary);">Responsive Breakpoints</h4>
798 <p style="font-size: var(--font-size-sm); color: var(--text-secondary);">
799 576px, 768px, 992px, 1200px - these are common breakpoints that work well for most layouts.
800 </p>
801 </div>
802
803 <div class="sidebar-item fade-in">
804 <h4 style="margin-bottom: var(--spacing-xs); color: var(--primary);">Flexible Typography</h4>
805 <p style="font-size: var(--font-size-sm); color: var(--text-secondary);">
806 Using clamp() for font sizes ensures text scales smoothly across all screen sizes.
807 </p>
808 </div>
809
810 <div class="sidebar-item fade-in">
811 <h4 style="margin-bottom: var(--spacing-xs); color: var(--primary);">Touch Optimization</h4>
812 <p style="font-size: var(--font-size-sm); color: var(--text-secondary);">
813 Touch targets are at least 44px high for comfortable mobile interaction.
814 </p>
815 </div>
816 </aside>
817 </div>
818 </div>
819 </section>
820
821 <!-- Typography Scale Example -->
822 <section id="flexible" class="section" style="background: var(--bg-primary);">
823 <div class="container">
824 <h2 class="section-title">🔤 Responsive Typography</h2>
825
826 <div style="text-align: center; margin-bottom: var(--spacing-lg);">
827 <div class="display-text fade-in" style="background: linear-gradient(135deg, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;">
828 Fluid Typography Scale
829 </div>
830 <p class="responsive-text fade-in">
831 This typography system uses clamp() to create fluid scaling between minimum and maximum sizes.
832 Text remains readable and proportional across all devices without jarring size jumps.
833 </p>
834 </div>
835
836 <div class="responsive-grid">
837 <div class="card fade-in">
838 <div class="card-content">
839 <h3 style="font-size: var(--font-size-xxl); margin-bottom: var(--spacing-xs);">XXL Heading</h3>
840 <p style="font-size: var(--font-size-sm); color: var(--text-secondary);">
841 <code>clamp(1.95rem, 1.56vw + 1.56rem, 2.81rem)</code>
842 </p>
843 </div>
844 </div>
845
846 <div class="card fade-in">
847 <div class="card-content">
848 <h4 style="font-size: var(--font-size-xl); margin-bottom: var(--spacing-xs);">XL Heading</h4>
849 <p style="font-size: var(--font-size-sm); color: var(--text-secondary);">
850 <code>clamp(1.56rem, 1vw + 1.31rem, 2.11rem)</code>
851 </p>
852 </div>
853 </div>
854
855 <div class="card fade-in">
856 <div class="card-content">
857 <h5 style="font-size: var(--font-size-lg); margin-bottom: var(--spacing-xs);">Large Text</h5>
858 <p style="font-size: var(--font-size-sm); color: var(--text-secondary);">
859 <code>clamp(1.25rem, 0.61vw + 1.1rem, 1.58rem)</code>
860 </p>
861 </div>
862 </div>
863
864 <div class="card fade-in">
865 <div class="card-content">
866 <p style="font-size: var(--font-size-base); margin-bottom: var(--spacing-xs);">Base Text</p>
867 <p style="font-size: var(--font-size-sm); color: var(--text-secondary);">
868 <code>clamp(1rem, 0.34vw + 0.91rem, 1.19rem)</code>
869 </p>
870 </div>
871 </div>
872
873 <div class="card fade-in">
874 <div class="card-content">
875 <small style="font-size: var(--font-size-sm); margin-bottom: var(--spacing-xs); display: block;">Small Text</small>
876 <p style="font-size: var(--font-size-sm); color: var(--text-secondary);">
877 <code>clamp(0.8rem, 0.17vw + 0.76rem, 0.89rem)</code>
878 </p>
879 </div>
880 </div>
881
882 <div class="card fade-in">
883 <div class="card-content">
884 <p style="margin-bottom: var(--spacing-xs);"><strong>Spacing Scale</strong></p>
885 <p style="font-size: var(--font-size-sm); color: var(--text-secondary);">
886 Uses clamp() for consistent, scalable spacing throughout the design system.
887 </p>
888 </div>
889 </div>
890 </div>
891 </div>
892 </section>
893
894 <!-- Summary Section -->
895 <section class="section" style="text-align: center;">
896 <div class="container">
897 <h2 class="section-title">🎉 Responsive Design Mastery Achieved!</h2>
898 <div style="background: var(--bg-primary); border-radius: 16px; padding: var(--spacing-xl); border: 1px solid var(--border);">
899 <p style="font-size: var(--font-size-lg); margin-bottom: var(--spacing-md); color: var(--text-secondary);">
900 You've mastered the art of creating truly adaptive, user-centered designs!
901 </p>
902
903 <div class="responsive-grid" style="margin-top: var(--spacing-lg);">
904 <div style="background: linear-gradient(135deg, #3b82f6, #1e40af); color: white; padding: var(--spacing-md); border-radius: 12px;">
905 <strong style="display: block; margin-bottom: var(--spacing-xs);">✅ Media Queries</strong>
906 <small>Breakpoints, Orientation, Preferences</small>
907 </div>
908 <div style="background: linear-gradient(135deg, #10b981, #047857); color: white; padding: var(--spacing-md); border-radius: 12px;">
909 <strong style="display: block; margin-bottom: var(--spacing-xs);">✅ Flexible Units</strong>
910 <small>rem, em, vw, vh, clamp()</small>
911 </div>
912 <div style="background: linear-gradient(135deg, #f59e0b, #d97706); color: white; padding: var(--spacing-md); border-radius: 12px;">
913 <strong style="display: block; margin-bottom: var(--spacing-xs);">✅ Mobile-First</strong>
914 <small>Progressive Enhancement</small>
915 </div>
916 </div>
917 </div>
918 </div>
919 </section>
920
921 <!-- Footer -->
922 <footer class="footer">
923 <div class="container">
924 <div class="footer-grid">
925 <div>
926 <h4 style="margin-bottom: var(--spacing-sm);">Responsive Design</h4>
927 <p style="font-size: var(--font-size-sm); opacity: 0.8;">
928 Creating adaptive experiences for every device and user.
929 </p>
930 </div>
931 <div>
932 <h4 style="margin-bottom: var(--spacing-sm);">Learn More</h4>
933 <p style="font-size: var(--font-size-sm); opacity: 0.8;">
934 Continue your journey with CSS animations, advanced layouts, and modern techniques.
935 </p>
936 </div>
937 <div>
938 <h4 style="margin-bottom: var(--spacing-sm);">Best Practices</h4>
939 <p style="font-size: var(--font-size-sm); opacity: 0.8;">
940 Always test on real devices, consider accessibility, and prioritize performance.
941 </p>
942 </div>
943 </div>
944 <div style="text-align: center; margin-top: var(--spacing-lg); padding-top: var(--spacing-md); border-top: 1px solid rgba(255,255,255,0.2);">
945 <p style="font-size: var(--font-size-sm); opacity: 0.7;">
946 © 2024 Responsive Design Master. Built with CSS Grid, Flexbox, and modern responsive techniques.
947 </p>
948 </div>
949 </div>
950 </footer>
951
952 <script>
953 // Mobile navigation toggle
954 function toggleMenu() {
955 const menu = document.getElementById('navMenu');
956 menu.classList.toggle('active');
957 }
958
959 // Close mobile menu when clicking on a link
960 document.querySelectorAll('.nav-menu a').forEach(link => {
961 link.addEventListener('click', () => {
962 document.getElementById('navMenu').classList.remove('active');
963 });
964 });
965
966 // Intersection Observer for animations
967 const observerOptions = {
968 threshold: 0.1,
969 rootMargin: '0px 0px -50px 0px'
970 };
971
972 const observer = new IntersectionObserver((entries) => {
973 entries.forEach(entry => {
974 if (entry.isIntersecting) {
975 entry.target.style.opacity = '1';
976 entry.target.style.transform = 'translateY(0)';
977 }
978 });
979 }, observerOptions);
980
981 // Initialize animations
982 document.querySelectorAll('.fade-in').forEach(el => {
983 el.style.opacity = '0';
984 el.style.transform = 'translateY(20px)';
985 el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
986 observer.observe(el);
987 });
988
989 // Smooth scrolling for anchor links
990 document.querySelectorAll('a[href^="#"]').forEach(anchor => {
991 anchor.addEventListener('click', function (e) {
992 e.preventDefault();
993 const target = document.querySelector(this.getAttribute('href'));
994 if (target) {
995 target.scrollIntoView({
996 behavior: 'smooth',
997 block: 'start'
998 });
999 }
1000 });
1001 });
1002
1003 // Handle resize events for responsive demo
1004 let resizeTimeout;
1005 window.addEventListener('resize', () => {
1006 clearTimeout(resizeTimeout);
1007 resizeTimeout = setTimeout(() => {
1008 // Could trigger responsive behavior demonstrations here
1009 console.log('Viewport resized to:', window.innerWidth + 'x' + window.innerHeight);
1010 }, 250);
1011 });
1012 </script>
1013</body>
1014</html>This comprehensive responsive design demonstration covers all essential concepts from Lesson 9:
📱 Complete Mobile-First Implementation:
📐 Advanced Media Query System:
⚡ Flexible Unit Mastery:
🎯 Real-World Layout Applications:
🌟 Modern Responsive Techniques:
This example demonstrates how modern responsive design creates truly adaptive experiences that work beautifully on any device while maintaining performance and accessibility.
Excellent work mastering responsive design foundations! You now understand how to create truly adaptive, user-centered layouts. Next, we'll explore "Transitions & Basic Animations" where you'll learn to add smooth, engaging motion to your responsive designs using CSS animations and transitions. Get ready to bring your layouts to life!
Your progress is saved in this browser, on this device only.