4 min read
•Question 12 of 49easyHow Do Media Queries Work?
Understanding responsive design with media queries.
What You'll Learn
- Media query syntax
- Common breakpoints
- Mobile-first approach
Syntax
styles.cssCSS
@media (condition) {
/* styles */
}Common Breakpoints
styles.cssCSS
/* Mobile first approach */
.container { width: 100%; }
/* Tablet */
@media (min-width: 768px) {
.container { width: 750px; }
}
/* Desktop */
@media (min-width: 1024px) {
.container { width: 960px; }
}
/* Large desktop */
@media (min-width: 1200px) {
.container { width: 1140px; }
}Other Media Features
styles.cssCSS
/* Orientation */
@media (orientation: landscape) { }
/* Dark mode */
@media (prefers-color-scheme: dark) { }
/* Reduced motion */
@media (prefers-reduced-motion: reduce) { }
/* Hover capability */
@media (hover: hover) { }