Media Queries and Mobile-First Development
Write breakpoints with min-width media queries, build the mobile layout first, and progressively enhance for larger screens.
What Are Media Queries?
Media queries apply CSS rules only when certain conditions are true — like the viewport width being above a threshold. They are the foundation of responsive design, letting one stylesheet adapt to any screen size.
Basic Syntax
A media query wraps a block of CSS in an @media rule. The rules inside only apply when the condition matches.
@media (min-width: 768px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}All lessons in this course
- The Viewport Meta Tag
- Flexbox for Layout
- CSS Grid for Layout
- Media Queries and Mobile-First Development