Media Queries and Mobile-First Development
Write breakpoints with min-width media queries, build the mobile layout first, and progressively enhance for larger screens.
Media Queries and Mobile-First Development is a free Frontend Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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;
}
}min-width vs max-width
min-width: apply styles when viewport is at least this wide (mobile-first). max-width: apply styles when viewport is at most this wide (desktop-first). Prefer min-width for mobile-first development.
/* Mobile-first (preferred): */
@media (min-width: 768px) { /* tablets and up */ }
@media (min-width: 1024px) { /* desktops and up */ }
/* Desktop-first: */
@media (max-width: 767px) { /* phones only */ }Mobile-First Approach
Write CSS for small screens first (outside any media query). Then use min-width media queries to progressively add complexity for larger screens. This produces smaller CSS for mobile users and cleaner code overall.
.card {
/* Mobile defaults: single column */
padding: 16px;
font-size: 0.9rem;
}
@media (min-width: 768px) {
.card {
/* Tablet enhancement */
padding: 24px;
font-size: 1rem;
}
}Common Breakpoints
Choose breakpoints based on your content, not specific devices. Popular starting points: 480px (large phones), 768px (tablets), 1024px (small desktops), 1280px (large desktops). Avoid breakpoints that target specific device models.
Media Types
Beyond screen width you can target media types: screen for displays, print for printers. Print media queries let you customise how a page looks when printed (hide nav, adjust colours).
@media print {
nav, footer, .ads {
display: none;
}
body {
font-size: 12pt;
color: black;
}
}Combining Conditions with and
Chain conditions with and: apply styles only when both are true. Use not and or for more complex logic.
@media (min-width: 768px) and (max-width: 1023px) {
/* tablets only */
}
@media (orientation: landscape) and (max-width: 767px) {
/* landscape phones */
}prefers-color-scheme
Respond to the user's OS dark mode preference. Provide a dark theme without a toggle by default.
@media (prefers-color-scheme: dark) {
body {
background: #1a202c;
color: #f7fafc;
}
}prefers-reduced-motion
Honour users who prefer less motion (vestibular disorders, epilepsy). Disable or simplify animations inside this media query.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}Container Queries — The Future
Container queries (@container) apply styles based on the size of a parent container rather than the viewport. They enable truly component-level responsiveness, available in all modern browsers since 2023.
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card { flex-direction: row; }
}Logical Properties for RTL Support
Use logical properties like margin-inline-start instead of margin-left for layouts that work in both left-to-right and right-to-left languages. Future-proof your responsive layouts.
Quick Check
Which approach defines the mobile-first CSS strategy correctly?
Recap: Media Queries and Mobile-First
@media (min-width: N) for mobile-first progressive enhancement. Write base styles for mobile without queries. Add complexity for larger screens. prefers-color-scheme for dark mode. prefers-reduced-motion for accessibility. Container queries for component-level responsiveness.
Frequently asked questions
Is the “Media Queries and Mobile-First Development” lesson free?
Yes — the full text of “Media Queries and Mobile-First Development” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.
What will I learn in “Media Queries and Mobile-First Development”?
Write breakpoints with min-width media queries, build the mobile layout first, and progressively enhance for larger screens. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Frontend Academy?
No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Media Queries and Mobile-First Development” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Frontend Academy lesson?
Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- The Viewport Meta Tag
- Flexbox for Layout
- CSS Grid for Layout
- Media Queries and Mobile-First Development