CSS — Lesson 11
Media Queries
Making responsive designs for different screen sizes.
Media Queries
Media queries let you apply CSS rules based on device characteristics like screen width, height, and orientation.
Basic Syntax
/* Mobile first: styles for screens >= 768px */
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 1024px) {
.container {
max-width: 960px;
}
}
Common Breakpoints
/* Mobile: 0 - 575px */
/* Tablet: 576px - 991px */
/* Desktop: 992px+ */
@media (max-width: 576px) { /* Mobile */ }
@media (min-width: 576px) { /* Tablet+ */ }
@media (min-width: 992px) { /* Desktop+ */ }
Orientation & Other Features
@media (orientation: landscape) { ... }
@media (prefers-color-scheme: dark) { ... }
@media (hover: hover) { ... }
Tip: Use a mobile-first approach - write base styles for mobile, then add
min-width media queries for larger screens.
Practice what you learned in the Deoit Editor — a free, browser-based code editor.
Open Editor →