CSS - Media Queries

Overview

Quick links: Exercises • Checks • Print as PDF

Estimated time: 15–20 minutes

Media queries adapt layouts to different screens and preferences.

Learning Objectives

• Create breakpoint-based responsive layouts.
• Respect user preferences like dark mode and reduced motion.

Details & Examples

@media (min-width: 640px){ .grid{ grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px){ .grid{ grid-template-columns: repeat(4,1fr); } }
@media (prefers-color-scheme: dark){ :root{ color-scheme: dark; } }
@media (prefers-reduced-motion: reduce){ *{ transition: none !important; animation: none !important; } }

Try it

Common Pitfalls

• Too many breakpoints increase complexity—prefer fluid techniques and clamp().

Checks for Understanding

1. How do you target large screens only?

Exercises

1. Implement a 2/4-column grid at 640px/1024px breakpoints. Add a reduced-motion override that disables transitions.
2. Add dark mode styles using (prefers-color-scheme: dark) and ensure sufficient contrast.