Media query basics

Learn the @media rule and screen width conditions.

What is an @media block?

An @media block groups styles that apply only when a condition is met. The most common condition is screen width. You can use one set of styles on phones and another on desktops.

@media (max-width: 600px) {
  body {
    background: navy;
    color: white;
  }
}

The keyword is @media, the condition sits in parentheses, and the styles go inside curly braces.

The max-width media feature

max-width is a media feature. It means "at most this width". When you write @media (max-width: 600px), the styles apply whenever the screen is 600px or narrower.

This is common in a desktop-first approach, where styles change as you move from desktop to phone. You start wide and add a new @media for each narrower step.

The min-width media feature

min-width means "at least this width". When you write @media (min-width: 768px), the styles apply whenever the screen is 768px or wider.

This is the backbone of the mobile-first approach. You write base styles for phones, then add a new @media at each widening step. This is the recommended approach today.

Exercise Change the background below 600px

Add an @media (max-width: 600px) block. Inside it, write a body selector with background: navy and color: white declarations.

Show example solution

/* Change the body color at 600px and below */
@media (max-width: 600px) {
  body {
    background: navy;
    color: white;
  }
}

Test yourself

When does @media (max-width: 600px) apply?
```
@media (max-width: 600px) {
  body { font-size: 18px; }
}
```
- Only when the screen is wider than 600px
- Only when the screen is 600px or narrower
- At every screen width
- Only in landscape mode
Show answer

Only when the screen is 600px or narrower — Correct. The max-width: 600px condition is met when the screen is 600px or narrower.

Complete the @media block

@media (max-width: ____) {
  body { background: navy; }
}

Show answer

@media (max-width: 600px) {
  body { background: navy; }
}

Which is true?
- max-width applies to wide screens, min-width to narrow screens
- Both apply only when printing
- Both apply at all times
- max-width applies to narrow screens, min-width to wide screens
Show answer

max-width applies to narrow screens, min-width to wide screens — Correct. max-width means 'at most', min-width means 'at least'; max applies when narrowing, min when widening.

Next lesson: Breakpoints

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies