Demon Tech Roadmap

CSS

CSS Media Queries

CSS media queries apply styling rules based on screen size.

Read Time

5 min read

Difficulty

Beginner

Last Updated

Jun 15, 2026

Version

v1.0.0

Introduction

CSS media queries detect the user's screen width and apply specific styles accordingly. Developers use them to stack side-by-side columns on mobile phones or hide complex navigation bars on small screens.

Syntax

1/* media query syntax */
2@media (max-width: 768px) {
3  .sidebar {
4    display: none;
5  }
6}

Example

1/* this changes color on small screens */
2body {
3  background-color: lightgreen;
4}
5
6@media (max-width: 600px) {
7  body {
8    background-color: lightblue;
9  }
10}

Key Points

The `@media` rule wraps the conditional CSS.
The `max-width` targets screens smaller than the value.
The `min-width` targets screens larger than the value.
Media queries drive all modern responsive design.

Up Next

Continue your journey with the next topic.

Go to CSS Variables ❯