Master CSS media queries and establish effective breakpoint strategies for responsive design.
CSS Media queries are the foundation of responsive design, allowing you to apply different styles based on device characteristics like screen size, resolution, and orientation. They're the bridge between your mobile-first base styles and desktop enhancements.
Understanding media queries is crucial because they determine how your website adapts across the vast spectrum of devices - from smartwatches to ultra-wide monitors. Modern media queries go far beyond simple screen width, offering sophisticated targeting based on user preferences, device capabilities, and environmental conditions.
In this lesson, you'll master media query syntax, learn strategic breakpoint selection, and discover advanced features that make your responsive designs more robust and user-friendly.
Media queries use a flexible syntax that allows precise targeting of devices and user preferences.
Basic Media Query Syntax:
1@media media-type and (condition) {
2 /* CSS rules */
3}Complete Syntax Breakdown:
1@media screen and (min-width: 768px) and (orientation: landscape) {
2 .layout {
3 display: grid;
4 grid-template-columns: 1fr 2fr;
5 }
6}Media Types:
Common Media Features:
1/* Width-based queries */
2@media (min-width: 768px) { }
3@media (max-width: 767px) { }
4@media (width: 768px) { }
5
6/* Height-based queries */
7@media (min-height: 600px) { }
8@media (max-height: 400px) { }
9
10/* Orientation queries */
11@media (orientation: portrait) { }
12@media (orientation: landscape) { }
13
14/* Resolution queries */
15@media (min-resolution: 2dppx) { }
16@media (-webkit-min-device-pixel-ratio: 2) { }
17
18/* Aspect ratio queries */
19@media (aspect-ratio: 16/9) { }
20@media (min-aspect-ratio: 1/1) { }Modern Media Features:
1/* User preference queries */
2@media (prefers-color-scheme: dark) { }
3@media (prefers-reduced-motion: reduce) { }
4@media (prefers-contrast: high) { }
5
6/* Interaction capability */
7@media (hover: hover) { }
8@media (pointer: fine) { }
9@media (pointer: coarse) { }
10
11/* Display features */
12@media (display-mode: standalone) { }
13@media (color-gamut: p3) { }Logical Operators:
Complex Media Queries:
1/* Multiple conditions with AND */
2@media screen and (min-width: 768px) and (max-width: 1199px) {
3 /* Tablet-specific styles */
4}
5
6/* Multiple queries with OR (comma) */
7@media (orientation: portrait), (max-width: 600px) {
8 /* Portrait OR small screen */
9}
10
11/* Negation with NOT */
12@media not screen and (max-width: 767px) {
13 /* Everything except mobile screens */
14}Mobile-First Media Query Pattern:
1/* Base styles (mobile-first) */
2.container {
3 padding: 1rem;
4}
5
6/* Tablet and up */
7@media (min-width: 768px) {
8 .container {
9 padding: 2rem;
10 }
11}
12
13/* Desktop and up */
14@media (min-width: 1024px) {
15 .container {
16 padding: 3rem;
17 max-width: 1200px;
18 margin: 0 auto;
19 }
20}This mobile-first approach ensures optimal performance and progressive enhancement.
Effective breakpoint strategy is crucial for maintainable responsive design. Modern approaches focus on content-driven breakpoints rather than device-specific sizes.
Common Breakpoint Systems:
Bootstrap/Industry Standard:
1/* Extra small devices (phones) */
2/* Base styles, no media query */
3
4/* Small devices (landscape phones, 576px and up) */
5@media (min-width: 576px) { }
6
7/* Medium devices (tablets, 768px and up) */
8@media (min-width: 768px) { }
9
10/* Large devices (desktops, 992px and up) */
11@media (min-width: 992px) { }
12
13/* Extra large devices (large desktops, 1200px and up) */
14@media (min-width: 1200px) { }
15
16/* XX-Large devices (larger desktops, 1400px and up) */
17@media (min-width: 1400px) { }Content-First Approach:
Instead of device-based breakpoints, use content-driven breakpoints:
1/* When content needs adjustment */
2@media (min-width: 32em) { /* 512px */
3 .card-grid {
4 grid-template-columns: repeat(2, 1fr);
5 }
6}
7
8@media (min-width: 48em) { /* 768px */
9 .card-grid {
10 grid-template-columns: repeat(3, 1fr);
11 }
12}
13
14@media (min-width: 64em) { /* 1024px */
15 .card-grid {
16 grid-template-columns: repeat(4, 1fr);
17 }
18}Using EM Units for Breakpoints:
EM units respect user font size preferences:
1/* Better accessibility */
2@media (min-width: 48em) { /* 768px at 16px base font */
3 .responsive-layout {
4 display: grid;
5 }
6}Breakpoint Management with CSS Custom Properties:
1:root {
2 --bp-small: 36em; /* 576px */
3 --bp-medium: 48em; /* 768px */
4 --bp-large: 62em; /* 992px */
5 --bp-xlarge: 75em; /* 1200px */
6}
7
8@media (min-width: var(--bp-medium)) {
9 /* Styles for medium screens and up */
10}Container Query Strategy (Modern):
1.card-container {
2 container-type: inline-size;
3}
4
5@container (min-width: 400px) {
6 .card {
7 display: grid;
8 grid-template-columns: auto 1fr;
9 }
10}Breakpoint Testing Strategy:
Common Breakpoint Pitfalls:
Professional Breakpoint Architecture:
1// Sass mixin example
2@mixin respond-to($breakpoint) {
3 @if $breakpoint == small {
4 @media (min-width: 36em) { @content; }
5 }
6 @if $breakpoint == medium {
7 @media (min-width: 48em) { @content; }
8 }
9 @if $breakpoint == large {
10 @media (min-width: 64em) { @content; }
11 }
12}
13
14// Usage
15.component {
16 padding: 1rem;
17
18 @include respond-to(medium) {
19 padding: 2rem;
20 }
21}Modern media queries offer powerful features for creating sophisticated, user-aware responsive designs.
User Preference Media Queries:
1/* Dark mode support */
2@media (prefers-color-scheme: dark) {
3 :root {
4 --bg-color: #1a1a1a;
5 --text-color: #ffffff;
6 --accent-color: #4f9eff;
7 }
8}
9
10/* Reduced motion for accessibility */
11@media (prefers-reduced-motion: reduce) {
12 * {
13 animation-duration: 0.01ms !important;
14 animation-iteration-count: 1 !important;
15 transition-duration: 0.01ms !important;
16 }
17}
18
19/* High contrast preference */
20@media (prefers-contrast: high) {
21 .button {
22 border: 2px solid currentColor;
23 font-weight: bold;
24 }
25}Interaction Capability Queries:
1/* Hover capability detection */
2@media (hover: hover) {
3 .interactive-element:hover {
4 transform: scale(1.05);
5 transition: transform 0.2s ease;
6 }
7}
8
9/* Touch vs mouse detection */
10@media (pointer: coarse) {
11 /* Touch devices - larger touch targets */
12 .touch-target {
13 min-height: 48px;
14 min-width: 48px;
15 }
16}
17
18@media (pointer: fine) {
19 /* Mouse/trackpad - smaller precise targets */
20 .precise-control {
21 min-height: 32px;
22 }
23}Resolution and Display Queries:
1/* High-DPI displays */
2@media (min-resolution: 2dppx) {
3 .logo {
4 background-image: url('logo-2x.png');
5 background-size: 100px 50px;
6 }
7}
8
9/* P3 color gamut support */
10@media (color-gamut: p3) {
11 .vibrant-color {
12 color: color(display-p3 1 0.5 0);
13 }
14}Progressive Web App Queries:
1/* Standalone PWA mode */
2@media (display-mode: standalone) {
3 .header {
4 padding-top: env(safe-area-inset-top);
5 }
6}Complex Responsive Patterns:
1/* Responsive typography with clamp() */
2.heading {
3 font-size: clamp(1.5rem, 4vw, 3rem);
4}
5
6/* Aspect ratio with fallback */
7.video-container {
8 width: 100%;
9 height: 0;
10 padding-bottom: 56.25%; /* 16:9 aspect ratio */
11}
12
13@supports (aspect-ratio: 16 / 9) {
14 .video-container {
15 height: auto;
16 padding-bottom: 0;
17 aspect-ratio: 16 / 9;
18 }
19}Media Query Organization:
1/* Mobile-first component approach */
2.component {
3 /* Base mobile styles */
4 display: flex;
5 flex-direction: column;
6
7 /* Component-specific breakpoints */
8 @media (min-width: 32rem) {
9 flex-direction: row;
10 }
11
12 @media (min-width: 48rem) {
13 gap: 2rem;
14 }
15
16 /* Nested element adjustments */
17 .component__item {
18 margin-bottom: 1rem;
19
20 @media (min-width: 32rem) {
21 margin-bottom: 0;
22 margin-right: 1rem;
23 }
24 }
25}Performance Optimization:
1/* Critical CSS - inline in head */
2@media (max-width: 767px) {
3 .mobile-critical {
4 display: block;
5 }
6}
7
8/* Non-critical CSS - loaded asynchronously */
9@media (min-width: 768px) {
10 .desktop-enhancement {
11 animation: slideIn 0.3s ease;
12 }
13}Effective testing ensures your media queries work across all devices and scenarios.
Browser Developer Tools:
Physical Device Testing:
1/* Debug helper - shows active breakpoint */
2body::before {
3 content: "Mobile";
4 position: fixed;
5 top: 0;
6 left: 0;
7 background: red;
8 color: white;
9 padding: 5px;
10 z-index: 9999;
11}
12
13@media (min-width: 768px) {
14 body::before {
15 content: "Tablet";
16 background: orange;
17 }
18}
19
20@media (min-width: 1024px) {
21 body::before {
22 content: "Desktop";
23 background: green;
24 }
25}Media Query Testing Checklist:
Common Media Query Issues:
Advanced Testing Techniques:
1// JavaScript media query testing
2const mediaQuery = window.matchMedia('(min-width: 768px)');
3
4function handleScreenChange(e) {
5 if (e.matches) {
6 console.log('Desktop layout active');
7 } else {
8 console.log('Mobile layout active');
9 }
10}
11
12mediaQuery.addListener(handleScreenChange);
13handleScreenChange(mediaQuery); // Initial checkAccessibility Testing:
Performance Monitoring:
1/* Monitor which styles are active */
2@media (min-width: 768px) {
3 .performance-marker::after {
4 content: "Tablet styles loaded";
5 }
6}Documentation and Maintenance:
Master media queries with this comprehensive demonstration showing mobile-first breakpoints, user preferences, and advanced responsive patterns.
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>CSS Media Queries & Breakpoints Mastery</title>
7 <style>
8 /* CSS RESET & BASE STYLES */
9 * {
10 margin: 0;
11 padding: 0;
12 box-sizing: border-box;
13 }
14
15 /* CSS CUSTOM PROPERTIES FOR BREAKPOINTS */
16 :root {
17 --bp-small: 36em; /* 576px */
18 --bp-medium: 48em; /* 768px */
19 --bp-large: 64em; /* 1024px */
20 --bp-xlarge: 80em; /* 1280px */
21
22 /* Color scheme variables */
23 --bg-primary: #ffffff;
24 --bg-secondary: #f8f9fa;
25 --text-primary: #212529;
26 --text-secondary: #6c757d;
27 --accent-color: #0066cc;
28 --border-color: #dee2e6;
29 }
30
31 /* DARK MODE SUPPORT */
32 @media (prefers-color-scheme: dark) {
33 :root {
34 --bg-primary: #1a1a1a;
35 --bg-secondary: #2d3338;
36 --text-primary: #ffffff;
37 --text-secondary: #adb5bd;
38 --accent-color: #4dabf7;
39 --border-color: #495057;
40 }
41 }
42
43 /* MOBILE-FIRST BASE STYLES */
44 body {
45 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
46 line-height: 1.6;
47 color: var(--text-primary);
48 background-color: var(--bg-primary);
49 transition: background-color 0.3s ease, color 0.3s ease;
50 }
51
52 /* BREAKPOINT INDICATOR */
53 .breakpoint-indicator {
54 position: fixed;
55 top: 10px;
56 right: 10px;
57 background: var(--accent-color);
58 color: white;
59 padding: 0.5rem 1rem;
60 border-radius: 20px;
61 font-size: 0.8rem;
62 font-weight: bold;
63 z-index: 1000;
64 }
65
66 .breakpoint-indicator::before {
67 content: "📱 Mobile";
68 }
69
70 /* CONTAINER SYSTEM */
71 .container {
72 width: 100%;
73 max-width: 100%;
74 margin: 0 auto;
75 padding: 1rem;
76 }
77
78 /* HEADER */
79 .header {
80 background: linear-gradient(135deg, var(--accent-color) 0%, #4c6ef5 100%);
81 color: white;
82 text-align: center;
83 padding: 2rem 1rem;
84 margin-bottom: 2rem;
85 }
86
87 .header h1 {
88 font-size: 1.8rem;
89 font-weight: 700;
90 margin-bottom: 0.5rem;
91 }
92
93 .header p {
94 font-size: 1rem;
95 opacity: 0.9;
96 }
97
98 /* NAVIGATION */
99 .nav {
100 background: var(--bg-secondary);
101 border: 1px solid var(--border-color);
102 border-radius: 8px;
103 margin-bottom: 2rem;
104 overflow: hidden;
105 }
106
107 .nav-item {
108 display: block;
109 padding: 1rem;
110 color: var(--text-primary);
111 text-decoration: none;
112 border-bottom: 1px solid var(--border-color);
113 transition: background-color 0.2s ease;
114 }
115
116 .nav-item:last-child {
117 border-bottom: none;
118 }
119
120 .nav-item:active {
121 background-color: var(--accent-color);
122 color: white;
123 }
124
125 /* GRID SYSTEM */
126 .grid {
127 display: grid;
128 gap: 1.5rem;
129 grid-template-columns: 1fr;
130 }
131
132 /* CARD COMPONENT */
133 .card {
134 background: var(--bg-secondary);
135 border: 1px solid var(--border-color);
136 border-radius: 12px;
137 padding: 1.5rem;
138 transition: transform 0.2s ease, box-shadow 0.2s ease;
139 }
140
141 .card h3 {
142 color: var(--accent-color);
143 margin-bottom: 0.75rem;
144 font-size: 1.2rem;
145 }
146
147 .card p {
148 color: var(--text-secondary);
149 margin-bottom: 1rem;
150 }
151
152 /* RESPONSIVE IMAGE */
153 .responsive-image {
154 width: 100%;
155 height: 200px;
156 background: linear-gradient(45deg, #e3f2fd, #bbdefb);
157 border-radius: 8px;
158 margin-bottom: 1rem;
159 display: flex;
160 align-items: center;
161 justify-content: center;
162 font-size: 3rem;
163 }
164
165 /* BUTTON */
166 .btn {
167 display: inline-block;
168 padding: 0.75rem 1.5rem;
169 background: var(--accent-color);
170 color: white;
171 text-decoration: none;
172 border-radius: 6px;
173 border: none;
174 font-size: 1rem;
175 cursor: pointer;
176 transition: background-color 0.2s ease;
177 }
178
179 .btn:active {
180 background: #0052a3;
181 }
182
183 /* REDUCED MOTION SUPPORT */
184 @media (prefers-reduced-motion: reduce) {
185 * {
186 animation-duration: 0.01ms !important;
187 animation-iteration-count: 1 !important;
188 transition-duration: 0.01ms !important;
189 }
190 }
191
192 /* ===== SMALL DEVICES (576px+) ===== */
193 @media (min-width: 36em) {
194 .breakpoint-indicator::before {
195 content: "📱 Small";
196 }
197
198 .container {
199 padding: 1.5rem;
200 }
201
202 .grid {
203 grid-template-columns: repeat(2, 1fr);
204 }
205
206 .header h1 {
207 font-size: 2rem;
208 }
209 }
210
211 /* ===== MEDIUM DEVICES (768px+) ===== */
212 @media (min-width: 48em) {
213 .breakpoint-indicator::before {
214 content: "💻 Medium";
215 }
216
217 .container {
218 max-width: 720px;
219 padding: 2rem;
220 }
221
222 .nav {
223 display: flex;
224 border-radius: 12px;
225 }
226
227 .nav-item {
228 flex: 1;
229 text-align: center;
230 border-bottom: none;
231 border-right: 1px solid var(--border-color);
232 }
233
234 .nav-item:last-child {
235 border-right: none;
236 }
237
238 .grid {
239 grid-template-columns: repeat(3, 1fr);
240 gap: 2rem;
241 }
242
243 .header {
244 padding: 3rem 2rem;
245 }
246
247 .header h1 {
248 font-size: 2.5rem;
249 }
250
251 .responsive-image {
252 height: 250px;
253 }
254 }
255
256 /* HOVER CAPABILITY DETECTION */
257 @media (hover: hover) and (min-width: 48em) {
258 .nav-item:hover {
259 background-color: var(--accent-color);
260 color: white;
261 transform: translateY(-2px);
262 }
263
264 .card:hover {
265 transform: translateY(-4px);
266 box-shadow: 0 8px 25px rgba(0, 102, 204, 0.15);
267 }
268
269 .btn:hover {
270 background: #0052a3;
271 transform: translateY(-1px);
272 }
273 }
274
275 /* ===== LARGE DEVICES (1024px+) ===== */
276 @media (min-width: 64em) {
277 .breakpoint-indicator::before {
278 content: "🖥️ Large";
279 }
280
281 .container {
282 max-width: 960px;
283 }
284
285 .grid {
286 grid-template-columns: repeat(4, 1fr);
287 }
288
289 .header h1 {
290 font-size: 3rem;
291 }
292
293 .responsive-image {
294 height: 300px;
295 font-size: 4rem;
296 }
297
298 /* Advanced grid layout for large screens */
299 .featured-card {
300 grid-column: span 2;
301 }
302 }
303
304 /* ===== EXTRA LARGE DEVICES (1280px+) ===== */
305 @media (min-width: 80em) {
306 .breakpoint-indicator::before {
307 content: "🖥️ XL";
308 }
309
310 .container {
311 max-width: 1200px;
312 padding: 3rem;
313 }
314
315 .header {
316 padding: 4rem 3rem;
317 }
318
319 .responsive-image {
320 height: 350px;
321 font-size: 5rem;
322 }
323 }
324
325 /* ===== ORIENTATION QUERIES ===== */
326 @media (orientation: landscape) and (max-height: 500px) {
327 .header {
328 padding: 1rem;
329 }
330
331 .header h1 {
332 font-size: 1.5rem;
333 }
334 }
335
336 /* ===== HIGH CONTRAST SUPPORT ===== */
337 @media (prefers-contrast: high) {
338 .card {
339 border-width: 2px;
340 border-color: var(--text-primary);
341 }
342
343 .btn {
344 border: 2px solid currentColor;
345 font-weight: bold;
346 }
347 }
348
349 /* ===== PRINT STYLES ===== */
350 @media print {
351 .breakpoint-indicator,
352 .nav {
353 display: none;
354 }
355
356 .header {
357 background: none;
358 color: black;
359 }
360
361 .card {
362 border: 1px solid black;
363 page-break-inside: avoid;
364 }
365 }
366
367 /* ===== TOUCH VS MOUSE DETECTION ===== */
368 @media (pointer: coarse) {
369 /* Touch devices - larger touch targets */
370 .nav-item {
371 padding: 1.25rem;
372 font-size: 1.1rem;
373 }
374
375 .btn {
376 padding: 1rem 2rem;
377 font-size: 1.1rem;
378 }
379 }
380
381 @media (pointer: fine) {
382 /* Mouse/trackpad - more precise controls */
383 .nav-item {
384 padding: 0.875rem 1rem;
385 }
386 }
387
388 /* ===== HIGH-DPI DISPLAY SUPPORT ===== */
389 @media (min-resolution: 2dppx) {
390 .responsive-image {
391 background: linear-gradient(45deg, #e1f5fe, #81d4fa, #29b6f6);
392 }
393 }
394 </style>
395</head>
396<body>
397 <!-- BREAKPOINT INDICATOR -->
398 <div class="breakpoint-indicator"></div>
399
400 <!-- HEADER -->
401 <header class="header">
402 <div class="container">
403 <h1>CSS Media Queries Mastery</h1>
404 <p>Responsive breakpoints and advanced media query techniques</p>
405 </div>
406 </header>
407
408 <div class="container">
409 <!-- NAVIGATION -->
410 <nav class="nav">
411 <a href="#basics" class="nav-item">Query Basics</a>
412 <a href="#breakpoints" class="nav-item">Breakpoints</a>
413 <a href="#advanced" class="nav-item">Advanced</a>
414 <a href="#testing" class="nav-item">Testing</a>
415 </nav>
416
417 <!-- RESPONSIVE GRID -->
418 <div class="grid">
419 <div class="card featured-card" id="basics">
420 <div class="responsive-image">🎯</div>
421 <h3>Media Query Basics</h3>
422 <p>This page demonstrates mobile-first media queries with progressive enhancement across all screen sizes.</p>
423 <button class="btn" onclick="showBreakpointInfo()">Check Current Breakpoint</button>
424 </div>
425
426 <div class="card" id="breakpoints">
427 <div class="responsive-image">📏</div>
428 <h3>Breakpoint Strategy</h3>
429 <p>Content-driven breakpoints using em units for better accessibility and user preference respect.</p>
430 <button class="btn" onclick="toggleDarkMode()">Toggle Dark Mode</button>
431 </div>
432
433 <div class="card" id="advanced">
434 <div class="responsive-image">🚀</div>
435 <h3>Advanced Features</h3>
436 <p>User preferences, interaction detection, and modern media query features in action.</p>
437 <button class="btn" onclick="testUserPreferences()">Test Preferences</button>
438 </div>
439
440 <div class="card" id="testing">
441 <div class="responsive-image">🔍</div>
442 <h3>Testing & Debugging</h3>
443 <p>Comprehensive testing across devices, orientations, and user settings.</p>
444 <button class="btn" onclick="showDeviceInfo()">Device Info</button>
445 </div>
446
447 <div class="card">
448 <div class="responsive-image">📱</div>
449 <h3>Mobile Optimization</h3>
450 <p>Touch-friendly interfaces with appropriate sizing for different input methods.</p>
451 <a href="#" class="btn">Mobile Action</a>
452 </div>
453
454 <div class="card">
455 <div class="responsive-image">💻</div>
456 <h3>Desktop Enhancement</h3>
457 <p>Progressive enhancement adds hover effects, animations, and advanced layouts for capable devices.</p>
458 <a href="#" class="btn">Desktop Action</a>
459 </div>
460 </div>
461
462 <!-- INFO DISPLAY -->
463 <div id="info-display" style="margin-top: 2rem; padding: 1.5rem; background: var(--bg-secondary); border-radius: 12px; display: none;">
464 <h3 style="color: var(--accent-color); margin-bottom: 1rem;">Device & Breakpoint Information</h3>
465 <div id="info-content"></div>
466 </div>
467 </div>
468
469 <script>
470 // Progressive Enhancement: JavaScript adds convenience features
471
472 function showBreakpointInfo() {
473 const width = window.innerWidth;
474 let breakpoint = 'Mobile';
475 let features = ['Base mobile styles', 'Single column layout'];
476
477 if (width >= 576) {
478 breakpoint = 'Small (576px+)';
479 features = ['2-column grid', 'Enhanced spacing'];
480 }
481 if (width >= 768) {
482 breakpoint = 'Medium (768px+)';
483 features = ['3-column grid', 'Horizontal navigation', 'Hover effects'];
484 }
485 if (width >= 1024) {
486 breakpoint = 'Large (1024px+)';
487 features = ['4-column grid', 'Advanced layouts', 'Enhanced animations'];
488 }
489 if (width >= 1280) {
490 breakpoint = 'Extra Large (1280px+)';
491 features = ['Maximum optimization', 'Premium spacing'];
492 }
493
494 showInfo(`
495 <strong>Current Breakpoint:</strong> ${breakpoint}<br>
496 <strong>Screen Width:</strong> ${width}px<br>
497 <strong>Active Features:</strong> ${features.join(', ')}
498 `);
499 }
500
501 function toggleDarkMode() {
502 // This demonstrates how JavaScript can work with CSS media queries
503 const isDark = document.body.style.colorScheme === 'dark';
504 document.body.style.colorScheme = isDark ? 'light' : 'dark';
505
506 showInfo(`
507 <strong>Color Scheme:</strong> ${isDark ? 'Light' : 'Dark'} mode activated<br>
508 <strong>Note:</strong> This overrides system preference temporarily
509 `);
510 }
511
512 function testUserPreferences() {
513 const preferences = {
514 'Color Scheme': window.matchMedia('(prefers-color-scheme: dark)').matches ? 'Dark' : 'Light',
515 'Reduced Motion': window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'Reduced' : 'Normal',
516 'High Contrast': window.matchMedia('(prefers-contrast: high)').matches ? 'High' : 'Normal',
517 'Hover Capability': window.matchMedia('(hover: hover)').matches ? 'Yes' : 'No',
518 'Pointer Type': window.matchMedia('(pointer: fine)').matches ? 'Fine (Mouse)' : 'Coarse (Touch)'
519 };
520
521 let prefInfo = '<strong>User Preferences:</strong><br>';
522 for (let [pref, value] of Object.entries(preferences)) {
523 prefInfo += `${pref}: ${value}<br>`;
524 }
525
526 showInfo(prefInfo);
527 }
528
529 function showDeviceInfo() {
530 const info = {
531 'Screen Resolution': `${screen.width} × ${screen.height}`,
532 'Viewport Size': `${window.innerWidth} × ${window.innerHeight}`,
533 'Device Pixel Ratio': window.devicePixelRatio || 1,
534 'Orientation': screen.orientation ? screen.orientation.type : 'Unknown',
535 'Touch Support': 'ontouchstart' in window ? 'Yes' : 'No'
536 };
537
538 let deviceInfo = '<strong>Device Information:</strong><br>';
539 for (let [property, value] of Object.entries(info)) {
540 deviceInfo += `${property}: ${value}<br>`;
541 }
542
543 showInfo(deviceInfo);
544 }
545
546 function showInfo(content) {
547 const display = document.getElementById('info-display');
548 const infoContent = document.getElementById('info-content');
549
550 infoContent.innerHTML = content;
551 display.style.display = 'block';
552
553 // Auto-hide after 10 seconds
554 setTimeout(() => {
555 display.style.display = 'none';
556 }, 10000);
557 }
558
559 // Listen for orientation changes
560 if (screen.orientation) {
561 screen.orientation.addEventListener('change', () => {
562 console.log('Orientation changed to:', screen.orientation.type);
563 });
564 }
565
566 // Listen for media query changes
567 const mediaQuery = window.matchMedia('(min-width: 768px)');
568 mediaQuery.addListener((e) => {
569 console.log('Breakpoint changed:', e.matches ? 'Desktop' : 'Mobile');
570 });
571 </script>
572</body>
573</html>This comprehensive demonstration showcases advanced CSS media query techniques and responsive breakpoint strategies:
🎯 Complete Media Query Implementation:
1. Mobile-First Architecture:
2. Advanced Media Query Features:
3. Professional Breakpoint Strategy:
4. Responsive Design Patterns:
5. Accessibility Integration:
6. Modern CSS Techniques:
7. Real-World Testing Features:
8. Production-Ready Architecture:
This example demonstrates industry-standard responsive design practices while showcasing cutting-edge CSS media query features for modern web development.
Excellent work mastering CSS media queries and breakpoints! You now understand how to create sophisticated responsive designs that adapt to any device and user preference. In our next lesson, we'll explore Flexible Grid Systems, where you'll learn to build adaptive grid layouts using CSS Grid and Flexbox that respond intelligently to different screen sizes. Get ready to create complex, flexible layouts that scale beautifully!
Your progress is saved in this browser, on this device only.