Techie BabajiLearn to Code. Build Real Skills.
CSS · Layout

Media Queries

Media queries let CSS ask questions — “Is the screen at least 768px wide?”, “Does the user prefer dark mode?” — and apply styles only when the answer is yes.

Intermediate 5 min Lesson 14 of 26 Runnable examples
Before you start:Responsive Design
0/26 in CSS
On this page · 5 min · Intermediate

On this page

  1. Learning objectives
  2. Explanation
  3. Syntax
  4. Code example
  5. Step by step
  6. Real-world use
  7. Common mistakes
  8. Best practices
  9. Remember this
  10. Practice exercise
  11. Mini quiz
  12. Related topics
  13. My notes
Reading time
5 min
Difficulty
Intermediate
Updated
Oct 28, 2026

Related tutorials

Interview questions

Learning objectives#

  • Write media queries with min-width
  • Choose sensible breakpoints
  • Add dark mode with prefers-color-scheme
  • Respect prefers-reduced-motion

Explanation#

@media (min-width: 768px) { … } applies the rules inside only when the viewport is at least 768px wide.

Mobile first uses min-width queries that add features as screens grow. Desktop first uses max-width; mixing both gets confusing fast.

Common breakpoints: 640px (large phones), 768px (tablets), 1024px (laptops), 1280px (desktops). Better still: add a breakpoint wherever your design starts to look broken.

User preferences: prefers-color-scheme: dark detects dark mode; prefers-reduced-motion: reduce detects users who get dizzy from animations.

Other features: orientation: landscape, hover: hover (has a mouse), and print for printed pages.

Syntax#

CSS Illustrative
@media (min-width: 768px) {
  .sidebar { display: block; }
}
@media (prefers-color-scheme: dark) {
  body { background: #111; color: #eee; }
}

Code example: Breakpoints and dark mode#

HTMLBreakpoints and dark mode Runnable
<style>
  body { font-family: sans-serif; margin: 0; background: white; color: #111; }
  .layout { display: grid; gap: 12px; padding: 12px; }
  .layout > * { padding: 16px; border-radius: 8px; background: #e0e7ff; }


  /* Tablet and up: two columns */
  @media (min-width: 600px) {
    .layout { grid-template-columns: 200px 1fr; }
  }


  /* Laptop and up: three columns */
  @media (min-width: 900px) {
    .layout { grid-template-columns: 200px 1fr 200px; }
  }


  @media (prefers-color-scheme: dark) {
    body { background: #0f172a; color: #e2e8f0; }
    .layout > * { background: #1e293b; }
  }


  @media print {
    nav, aside { display: none; }
  }
</style>


<div class="layout">
  <nav>Menu</nav>
  <main>Main content — resize the preview.</main>
  <aside>Ads / related</aside>
</div>
Expected output
One column on narrow screens, two columns from 600px and three from 900px. Dark colours appear if your system uses dark mode. When printed, only the main content shows.
Opens this example in the full playground

Step-by-step explanation#

  1. Base styles (no query) are the mobile layout: one column.
  2. At 600px the grid gets a 200px menu column and a flexible main column.
  3. At 900px a right sidebar column is added.
  4. prefers-color-scheme: dark swaps the colours.
  5. The print query hides navigation and sidebars when printing.

Real-world use case#

A dashboard shows a collapsible menu on phones, a sidebar on laptops and an extra stats column on wide monitors — all with the same HTML.

Common mistakes#

Breakpoints for specific devices

“iPhone 15 = 393px” changes every year. Choose breakpoints where your content needs them.

Query order

With min-width queries, write small → large. A later smaller query would override larger ones.

Forgetting the viewport meta tag

Without it, phones report a ~980px width, so mobile styles never apply.

Best practices#

  • Mobile first with min-width queries
  • Use few breakpoints (2–4)
  • Keep queries next to the component they change
  • Support dark mode and reduced motion

Remember this#

min-width = “from this size and up”. Mobile first = min-width.

Breakpoints follow the content, not the device.

Media queries can ask about the user too: dark mode, reduced motion, print.

Practice exercise#

Your task: Hide .sidebar on screens narrower than 768px and show it as a 250px column from 768px up. Add a dark-mode background.

Need a hint?
Base: display none. Query: display block. Second query for prefers-color-scheme.
Show solution
CSS Illustrative
.sidebar { display: none; }


@media (min-width: 768px) {
  .page { display: grid; grid-template-columns: 250px 1fr; }
  .sidebar { display: block; }
}


@media (prefers-color-scheme: dark) {
  body { background: #121212; color: #eee; }
}

Mini quiz#

Media Queries quizMultiple choice Question 1 of 3

When does @media (min-width: 768px) apply?

Score so far: 0/0

Want more? Practise all CSS MCQs · CSS interview questions

My notes#

Saved in this browser.

Progress is saved in this browser. Sign in to sync.