MEDIA QUERIES

A responsive web page is like clothing that should fit different people:

• an adult
• a teenager
• a child

In web development, that means:

• desktop
• laptop
• tablet
• smartphone

A single layout must adapt to many screen conditions.

Developers solve this with media queries.

1. What media queries are

Media queries are a CSS tool that allows us to apply different styles depending on device or viewport conditions.

They help create adaptive and responsive pages that look good on different screens.

Main idea: a media query asks a question like:

• How wide is the viewport?
• Is this a screen or print?
• Is the device in portrait or landscape mode?

Then the browser applies the matching CSS rules.

Viewport / device condition
            down
      media query checks it
            down
matching CSS rules are applied

Browser
|
|- checks screen width
|- checks device type
|- checks other conditions
+- chooses matching styles

2. What media queries depend on

Media queries can depend on:

• viewport width
• browser settings
• device capabilities
• resolution
• orientation
• print mode
• other media features

But in everyday responsive design, the most common condition is viewport width.

Common media query targets
|
|- width
|- height
|- orientation
|- resolution
+- media type (screen / print)

3. How media queries work

The algorithm is simple:

1. The developer writes media queries and CSS rules inside them.
2. The browser watches the viewport and environment.
3. The browser applies the rules whose conditions are true.

Step 1: developer writes rules
        down
Step 2: browser checks conditions
        down
Step 3: matching rules become active

Example idea:

If width is small -> mobile styles
If width is medium -> tablet styles
If width is large -> desktop styles

4. Media query as a sentence

A media query can be understood like an instruction.

For example: “When the viewport width is 900px or more, make the background orange.”

So media queries are like conditional CSS.

IF condition is true
THEN apply these CSS rules

Condition:
viewport >= 900px

Action:
body background becomes orange

5. Anatomy of a media query

A media query starts with @media.

Then it may contain:

• a media type
• a media feature

General structure:

@media media-type and (media-feature) {
  /*
   * A set of CSS rules to apply
   * if the media type and feature condition is true
   */
}

@media
  |- media type
  |- and
  +- media feature

Example:

@media screen and (min-width: 900px) {
  body {
    background-color: orange;
  }
}

How to read it:

If this is a screen
and the width is at least 900px,
make the body background orange.

6. Media type and media feature

A media type describes the general output environment.

Examples:

• screen
• print
• all

A media feature describes a specific condition.

Examples:

• min-width
• max-width
• orientation

Media query
|
|- media type    -> what kind of output?
+- media feature -> what exact condition?

Example:

@media screen and (min-width: 900px)

Breakdown:

screen         -> media type
(min-width...) -> media feature

7. The min-width feature

min-width means: apply styles when the viewport width is greater than or equal to a value.

Example:

/* The CSS rules below apply when the viewport width is greater than or equal to 800px */
@media (min-width: 800px) {
  body {
    background-color: orange;
  }
}

How to read it:

If width >= 800px,
apply these styles.

Range diagram:

0 ----------- 799 | 800 ------------------------------>
                    styles start here

Another visual:

Viewport widths:

500px  -> no
700px  -> no
800px  -> yes
1000px -> yes

8. Example of min-width

Code:

@media (min-width: 550px) {
  body {
    background-color: blue;
  }
}

Meaning:

• below 550px -> this rule does not apply
• at 550px and above -> background becomes blue

Width line

0 -------- 549 | 550 ------------------------------>
                blue starts here

Examples:

400px -> no blue
549px -> no blue
550px -> blue
700px -> blue

9. The max-width feature

max-width means: apply styles when the viewport width is less than or equal to a value.

Example:

/* CSS rules apply when the viewport width is less than or equal to 600px */
@media (max-width: 600px) {
  body {
    background-color: green;
  }
}

How to read it:

If width <= 600px,
apply these styles.

Range diagram:

<---------------- 600 | 601 --------------------------->
styles active here

Examples:

400px -> green
600px -> green
601px -> not green
900px -> not green

10. min-width vs max-width

Comparison:

min-width: 800px
-> 800 and above

max-width: 600px
-> 600 and below

Visual comparison:

min-width
0 -------- 799 | 800 ------------------------------>
                 active area

max-width
<---------------- 600 | 601 ----------------------->
 active area

Short memory line:

min-width = from this point upward
max-width = up to this point

11. Multiple media queries

A stylesheet can contain many media queries.

The browser checks each one and applies the ones that match.

Example:

body {
  background-color: white;
}

/* Applies when the viewport width is less than or equal to 600px */
@media (max-width: 600px) {
  body {
    background-color: green;
  }
}

/* Applies when the viewport width is greater than or equal to 800px */
@media (min-width: 800px) {
  body {
    background-color: orange;
  }
}

12. How the previous example behaves

This code gives three visual zones.

0 ----------- 600 | 601 ------- 799 | 800 -------------------->
green              white             orange

So:

• up to 600px -> green
• 601px to 799px -> white
• 800px and above -> orange

Table:

Viewport width     Background
--------------------------------
500px              green
600px              green
700px              white
799px              white
800px              orange
1200px             orange

13. Gaps between media queries

Sometimes no media query matches.

Then the browser uses the base style.

In the previous example:

• between 601px and 799px
• neither query matches
• so the body stays white

Base style = white

[ green zone ] [ white gap ] [ orange zone ]

This is very normal.

14. Another multiple-query example

Code:

@media (max-width: 600px) {
  body {
    color: blue;
  }
}

@media (min-width: 700px) {
  body {
    color: green;
  }
}

0 ----------- 600 | 601 --- 699 | 700 ------------------------>
blue               default       green

Meaning:

• 600px and below -> blue text
• 601px to 699px -> default text color
• 700px and above -> green text

15. Overriding styles in media queries

Media queries do not automatically “win” because they are media queries.

Their rules still follow the normal CSS cascade.

Important:

• media queries do not add selector specificity
• order still matters
• only matching queries participate
• only matching properties are overridden

Example:

/* Base style */
body {
  background-color: #fff;
}

/* At 900px and wider, override the background color */
@media (min-width: 900px) {
  body {
    background-color: #388e3c;
  }
}

Base:
body background = white

If width >= 900px:
body background = green

So at large widths, the media query rule overrides the base background color.

16. Only identical properties are overridden

This is very important.

If a media query changes only background-color, it does not erase all other body styles.

Only the matching property changes.

Example:

/* Base styles */
body {
  color: #2a2a2a;
  background-color: #fff;
  font-size: 16px;
  line-height: 1.5;
  font-family: sans-serif;
}

/* From 600px and up, change background color, font size, and text color */
@media (min-width: 600px) {
  body {
    background-color: #2196f3;
    font-size: 20px;
    color: #fff;
  }
}

/* From 900px and up, change background color */
@media (min-width: 900px) {
  body {
    background-color: #4caf50;
  }
}

17. How layered styles work

Think of CSS like layers of a cake.

Base layer:

• color
• background
• font size
• line height
• font family

At 600px and up:

• background changes
• font size changes
• text color changes

At 900px and up:

• only background changes again

Layer 1: base styles
   down
Layer 2: 600px+ overrides some properties
   down
Layer 3: 900px+ overrides one property again

18. Result at widths above 900px

At width > 900px, the final body styles are:

• background-color: #4caf50 from the 900px query
• font-size: 20px from the 600px query
• color: #fff from the 600px query
• line-height: 1.5 from base
• font-family: sans-serif from base

Final style at >900px

background-color -> from 900px query
color            -> from 600px query
font-size        -> from 600px query
line-height      -> from base
font-family      -> from base

This shows: only identical properties get replaced.

19. Media types

A media type describes what kind of output device the styles are for.

Modern common media types:

• screen
• print
• all

Media types
|
|- screen -> displays with screens
|- print  -> printed output / print preview
+- all    -> any device

20. The print media type

print is for printing or print preview.

Example:

@media print {
  body {
    color: green;
  }
}

Meaning:

• when the page is printed
• or shown in print preview
• body text becomes green

Screen view  -> normal styles
Print view   -> print styles

Use cases:

• hide unnecessary navigation
• change colors for printing
• improve spacing for paper
• simplify layout

21. The screen media type

screen is for devices with physical screens.

That includes:

• smartphones
• tablets
• monitors
• TVs
• laptops

Example:

@media screen and (min-width: 400px) {
  /* ... */
}

Meaning:

• apply only on screens
• not in print mode

screen
|- phone
|- tablet
|- monitor
+- TV

22. Omitting the media type

Often developers omit screen.

Example:

@media (min-width: 400px) {
  /* ... */
}

Why is this allowed?

Because if no media type is written, the default is:

all

Meaning: apply to any device type that satisfies the condition.

Common rule:

• if you do not need separate print styles
• you can often omit screen

Comparison:

@media screen and (min-width: 400px)
@media (min-width: 400px)

In many normal responsive screen-only projects, the second form is common.

23. Simple and complex conditions

A media query can be:

• simple
• complex

Simple example:

@media (min-width: 768px) {
  /* styles */
}

Complex example:

@media screen and (min-width: 768px) {
  /* styles */
}

Most often, developers use:

• width-based conditions
• sometimes with screen

Simple:
@media (min-width: ...)

Complex:
@media screen and (min-width: ...)

24. Practical responsive example

Imagine this CSS:

body {
  background-color: white;
}

@media (min-width: 600px) {
  body {
    background-color: blue;
  }
}

@media (min-width: 900px) {
  body {
    background-color: green;
  }
}

0 ----------- 599 | 600 --------- 899 | 900 ------------------->
white              blue                green

This is a very common pattern:

• base mobile style first
• then tablet style
• then desktop style

25. Mobile-first thinking with min-width

A very common approach is:

• write base styles for small screens first
• then use min-width to enhance the layout for larger screens

Base styles      -> mobile
min-width: 600   -> tablet+
min-width: 900   -> desktop+

This builds styles in layers.

Start small
   down
add more styles at bigger widths
   down
page grows in complexity with screen size

26. Print example situation

Situation: a developer created a page with an application form for a social assistance program.

Later it turned out many users prefer filling it out offline.

Designers then created a separate print version.

That is exactly a case for:

@media print

Possible idea:

• remove buttons
• simplify colors
• adjust fonts and spacing
• make the form easier to print

Screen version:
navigation + colors + buttons + UI elements

Print version:
clean layout + readable spacing + print-friendly text

27. Developer tools and testing media queries

To test media queries:

• open Developer Tools
• enable responsive mode
• drag the viewport width
• watch which styles become active

Change viewport width
        down
browser re-checks media queries
        down
new styles may activate

Example:

590px -> mobile styles
650px -> tablet-like styles
920px -> desktop-like styles

28. Big summary diagram

Media queries
|
|- @media
|    |- media type
|    +- media feature
|
|- Common media features
|    |- min-width
|    +- max-width
|
|- Common media types
|    |- screen
|    |- print
|    +- all
|
|- Browser behavior
|    |- checks conditions
|    |- activates matching rules
|    +- uses CSS cascade
|
+- Responsive use
     |- mobile styles
     |- tablet styles
     +- desktop styles

29. Mini cheat sheet

@media               -> starts a media query
screen               -> devices with screens
print                -> print / print preview
all                  -> any device
min-width            -> width is at least this value
max-width            -> width is at most this value
breakpoint           -> width where styles change
base styles          -> default styles outside media queries
override             -> only matching properties are replaced

30. Common mistakes

Mistake 1: Thinking media queries replace all previous styles.

Problem: they only override matching properties.

Mistake 2: Forgetting the base style.

Problem: some width ranges may have no special query, so base style shows there.

Mistake 3: Misreading min-width and max-width.

Remember:

min-width -> from this width upward
max-width -> up to this width

Mistake 4: Testing only one screen size.

Problem: responsive bugs stay hidden.

Mistake 5: Writing print styles inside screen rules.

Problem: printed output will not get the intended design.

31. Final summary

Media queries are a CSS tool for applying styles depending on conditions such as viewport width or media type.

Important things to remember:

• media queries help build adaptive and responsive layouts
• they are written with @media
• common width features are min-width and max-width
• min-width applies from a value upward
• max-width applies up to a value
• multiple media queries can work together
• media query rules still follow the normal CSS cascade
• only identical properties are overridden
• common media types are screen, print, and all
• print styles are useful when a page needs a special print version

Super short memory line:

Media query = "if this condition is true, use these CSS rules."