Skip to content
beginnerPhase 31 · CSS

Media Queries

Apply styles based on device characteristics like width, height, and orientation.

30m
0 problems
Topic Progress0%

Media Query Syntax

Media Query Syntax

Basic Syntax

@media media-type and (condition) {
  /* CSS rules */
}

Media Types

@media screen { }    /* Screens */
@media print { }     /* Printers */
@media all { }       /* All devices (default) */

Media Features

Width

/* Min-width (mobile-first) */
@media (min-width: 768px) { }

/* Max-width */
@media (max-width: 767px) { }

/* Exact width */
@media (width: 1024px) { }

Height

@media (min-height: 600px) { }
@media (max-height: 400px) { }

Orientation

@media (orientation: landscape) { }
@media (orientation: portrait) { }

Resolution

@media (min-resolution: 2dppx) { } /* Retina */
@media (-webkit-min-device-pixel-ratio: 2) { } /* Safari */

Logical Operators

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

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

/* NOT */
@media not print { }

Modern Syntax

/* Range syntax */
@media (768px <= width <= 1024px) { }

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

/* Prefers */
@media (prefers-color-scheme: dark) { }
@media (prefers-reduced-motion: reduce) { }

Common Breakpoints

Common Breakpoints

Standard Breakpoints

/* Mobile */
@media (min-width: 576px) { /* Small tablet */ }
@media (min-width: 768px) { /* Tablet */ }
@media (min-width: 992px) { /* Desktop */ }
@media (min-width: 1200px) { /* Large desktop */ }
@media (min-width: 1400px) { /* Extra large */ }

Content-Based Breakpoints

/* Use when layout needs it */
.container {
  padding: 1rem;
}

@media (min-width: 40em) {
  .container {
    padding: 2rem;
  }
}

Utility-First Breakpoints

/* Tailwind-style */
@media (min-width: 640px) { .sm\:hidden { display: none; } }
@media (min-width: 768px) { .md\:flex { display: flex; } }
@media (min-width: 1024px) { .lg\:grid { display: grid; } }

Breakpoint Variables

:root {
  --bp-sm: 576px;
  --bp-md: 768px;
  --bp-lg: 992px;
  --bp-xl: 1200px;
}

@media (min-width: var(--bp-md)) { }

Note: CSS custom properties don't work directly in media queries. Use preprocessor variables instead.

Responsive Images

Responsive Images

Basic Responsive Image

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

Art Direction with HTML

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <source media="(min-width: 400px)" srcset="medium.jpg">
  <img src="small.jpg" alt="Responsive image">
</picture>

Resolution Switching

<img 
  srcset="image-1x.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x"
  src="image-1x.jpg"
  alt="High DPI image"
>

CSS Responsive Backgrounds

.hero {
  background-image: url('small.jpg');
}

@media (min-width: 768px) {
  .hero {
    background-image: url('large.jpg');
  }
}

Object-fit

.image-container {
  width: 300px;
  height: 200px;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* or contain */
}

Aspect Ratio

.video-wrapper {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.video-wrapper iframe {
  width: 100%;
  height: 100%;
}

Practice Problems

0/3solved
Build Media Queries Component

Create a reusable React component implementing Media Queries. Include proper state management and accessibility.

Solution
// Production-ready component with:
// - Proper TypeScript types
// - Accessibility (ARIA)
// - Error boundaries
// - Loading states
// - Memoization where needed
Media Queries Testing

Write unit and integration tests for Media Queries using React Testing Library.

Solution
// Test coverage:
// 1. Rendering tests
// 2. Interaction tests
// 3. Edge case tests
// 4. Accessibility tests
Media Queries Performance

Optimize Media Queries for performance. Consider memoization, code splitting, and bundle size.

Solution
// Optimization techniques:
// 1. React.memo / useMemo / useCallback
// 2. Code splitting with lazy()
// 3. Virtual scrolling for lists
// 4. Image lazy loading
// 5. Bundle analysis

Quiz

1. What is the correct syntax for a media query?

Question 1 options

2. What does (min-width: 768px) target?

Question 2 options

3. What does prefers-color-scheme: dark target?

Question 3 options

4. How do you make an image responsive?

Question 4 options

5. What does (hover: hover) test for?

Question 5 options

Flashcards

Question

What is a media query?

Click to reveal answer

Answer

A CSS technique that applies styles based on device characteristics like width, height, orientation, or resolution.

Question

What does min-width vs max-width do?

Click to reveal answer

Answer

min-width targets screens AT LEAST that size (scales up). max-width targets screens AT MOST that size (scales down).

Question

How do you support dark mode with CSS?

Click to reveal answer

Answer

Use @media (prefers-color-scheme: dark) { } to detect system dark mode setting.

Question

What is art direction with responsive images?

Click to reveal answer

Answer

Using the HTML <picture> element to serve different images at different viewport sizes.

Question

What does (hover: hover) check?

Click to reveal answer

Answer

It checks if the device supports hover interactions (like a mouse vs touchscreen).

Revision Notes

Key Takeaways

  • 1.Media queries apply styles based on device characteristics
  • 2.Use min-width for mobile-first approach
  • 3.prefers-color-scheme detects dark mode preference
  • 4.Responsive images use max-width: 100%
  • 5.Art direction uses the picture element for different crops

Interview Tips

  • •Know the difference between min-width and max-width
  • •Be able to write a mobile-first media query
  • •Understand how to support dark mode
  • •Explain the difference between art direction and resolution switching

Cheat Sheet

Media Queries Cheat Sheet

Basic Syntax

@media (min-width: 768px) {
  /* Tablet and up */
}

Common Breakpoints

  • 576px: Small tablet
  • 768px: Tablet
  • 992px: Desktop
  • 1200px: Large desktop

Logical Operators

  • and - Both conditions
  • , or or - Either condition
  • not - Negation

Modern Features

@media (hover: hover) { } /* Device can hover */
@media (prefers-color-scheme: dark) { } /* Dark mode */
@media (prefers-reduced-motion: reduce) { } /* Reduced motion */
@media (768px <= width <= 1024px) { } /* Range */

Responsive Images

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

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg">
  <img src="small.jpg" alt="">
</picture>