LearnViz CompSci
Home / Learn / Web Development / Media Queries

Beginner Topic 11 of 51 Web Development

Media Queries

CSS conditions applying styles by device characteristics.

How it works

Media queries apply CSS conditionally based on characteristics of the device or environment, such as viewport width, height, orientation, resolution, color scheme preference and reduced motion preference. The syntax is @media (min-width: 768px) { ... }, and queries can be combined with and, or and not. Range syntax and container queries extend the idea. Print and screen media types allow separate styles.

Step-by-step walkthrough

  1. The browser knows the viewport width.
  2. A media query tests it, @media (min-width: 768px).
  3. When true, the rules inside apply.
  4. The layout changes to two columns.
  5. Queries can also test dark mode, print and reduced motion.

Where it is used

Breakpoints for responsive layouts, dark mode with prefers-color-scheme, accessibility settings with prefers-reduced-motion and print stylesheets use media queries.

Common pitfall

Using max-width and min-width inconsistently creates overlapping or gap ranges. Too many device-specific breakpoints become hard to maintain. Overriding styles in many queries causes specificity problems. Prefer mobile-first min-width queries, choose breakpoints where the content breaks, and respect user preferences for motion and contrast.

Where it fits in the course

Media Queries is topic 11 of 51 in Web Development, rated Beginner. It follows Responsive Design. The next topic is JavaScript Basics.

Practice and explore

How to study this topic

  1. Read the explanation above and restate the definition in your own words.
  2. Open the interactive lesson and answer its mini quiz.
  3. Read the common pitfall, then write a short example that avoids it.
  4. Check your understanding in the Web Development quiz, and revisit the topic if you miss a question.

Frequently asked questions

What is Media Queries?
CSS conditions applying styles by device characteristics. It belongs to Web Development and is a beginner-level topic.
Where do people use Media Queries?
Breakpoints for responsive layouts, dark mode with prefers-color-scheme, accessibility settings with prefers-reduced-motion and print stylesheets use media queries.
What is the most common mistake with Media Queries?
Using max-width and min-width inconsistently creates overlapping or gap ranges.
What should I learn before this topic?
Start with Responsive Design, the topic just before it in Web Development.
How can I practice it?
Answer the mini quiz in the interactive lesson, then take the Web Development quiz.
Is Media Queries hard to learn?
It is a Beginner topic, so it works as an entry point. If the terms are new, read the explanation twice and try the visualizer before the quiz.
How long does it take to learn Media Queries?
Most learners can read the explanation and finish the interactive lesson in under an hour. Fluency comes from applying the idea, so plan a few short practice sessions with the quiz.
Which topics are related to Media Queries?
Responsive Design, JavaScript Basics, CSS Grid are closely connected. The full list is in the related topics section of this page.
What should I study after Media Queries?
Continue with JavaScript Basics, the next topic in Web Development.

Related topics