Media queries in CSS - Browser Rendering Trace

Render Flow - Media queries

Parse CSS file

↓

Detect @media rule

↓

Evaluate media condition

↓

If condition true: apply enclosed styles

↓

If condition false: ignore enclosed styles

↓

Calculate final styles

↓

Layout and paint

The browser reads CSS and finds media queries. It checks if the screen matches the query. If yes, it applies those styles. Then it lays out and paints the page.

Render Steps - 3 Steps

Code Added:<div class="box">Resize the window</div>

Before

→

After

┌─────────────────────────────┐
│ Resize the window           │
└─────────────────────────────┘

The box element appears with default styles (no color or size yet).

🔧 Browser Action:Creates DOM node and paints default text.

Code Sample

A colored box changes background color and font size when the browser width is 600px or less.

CSS

<div class="box">Resize the window</div>

CSS

@media (max-width: 600px) {
  .box {
    background-color: lightblue;
    font-size: 1.5rem;
  }
}

.box {
  background-color: lightcoral;
  font-size: 2rem;
  padding: 1rem;
  color: white;
  text-align: center;
  border-radius: 0.5rem;
}

Render Quiz - 3 Questions

After applying step 2, what is the background color of the box?

A Light coral

B Light blue

C Transparent

D White

Common Confusions - 2 Topics

Why don't my media query styles apply on desktop even though I wrote them?

If your media query uses max-width: 600px, it only applies when the screen is 600px or smaller. On desktop, the screen is usually wider, so those styles are ignored. See render_step 3 where the condition controls style application.

💡 Media queries apply styles only when their conditions match the screen size or feature.

Why does resizing the browser window change the box color?

Because the media query checks the viewport width dynamically. When the width goes below 600px, the styles inside the media query apply, changing the color and font size. This is shown in render_step 3.

💡 Media queries react to screen size changes in real time.

Property Reference

Property	Value Applied	Condition Type	Visual Effect	Common Use
@media	(max-width: 600px)	max-width	Applies styles only if viewport width ≤ 600px	Responsive design for small screens
@media	(min-width: 601px)	min-width	Applies styles only if viewport width ≥ 601px	Desktop or larger screen styles
@media	(orientation: portrait)	orientation	Applies styles if device is in portrait mode	Adjust layout for vertical screens
@media	(prefers-color-scheme: dark)	feature query	Applies styles if user prefers dark mode	Dark mode support

Concept Snapshot

Media queries let CSS change styles based on screen size or features. Use @media with conditions like max-width or orientation. Styles inside apply only if the condition matches. Common for responsive design to adapt layouts. Browser checks conditions on load and resize. Helps make websites look good on phones and desktops.

Practice

1. What is the main purpose of CSS @media queries?

easy

A. To link external CSS files

B. To add animations to elements

C. To apply different styles based on device screen size or features

D. To create CSS variables

Solution

1. Step 1: Understand what @media does

   @media queries let CSS change styles depending on device features like screen width.

2. Step 2: Compare options to this purpose

   Only To apply different styles based on device screen size or features describes applying styles based on screen size or features, which matches @media usage.

3. Final Answer:

   To apply different styles based on device screen size or features -> Option C

4. Quick Check:

   Media queries = responsive styles [OK]

Hint: Media queries adapt styles to screen size or device [OK]

Common Mistakes:

• Confusing media queries with animations
• Thinking media queries link CSS files
• Mixing media queries with CSS variables

2. Which of the following is the correct syntax to apply styles only when the screen width is 600px or less?

easy

A. @media (width < 600px) { /* styles here */ }

B. @media (max-width: 600px) { /* styles here */ }

C. @media screen and (min-width: 600px) { /* styles here */ }

D. @media max-width: 600px { /* styles here */ }

Solution

1. Step 1: Recall correct media query syntax for max-width

   The correct syntax uses @media (max-width: 600px) with parentheses and colon.

2. Step 2: Check each option

   @media (max-width: 600px) { /* styles here */ } matches the correct syntax. @media screen and (min-width: 600px) { /* styles here */ } uses min-width, which is opposite. @media (width < 600px) { /* styles here */ } uses invalid syntax. @media max-width: 600px { /* styles here */ } misses parentheses.

3. Final Answer:

   @media (max-width: 600px) { /* styles here */ } -> Option B

4. Quick Check:

   Use parentheses and colon for max-width [OK]

Hint: Use parentheses and colon for conditions in @media [OK]

Common Mistakes:

• Omitting parentheses around conditions
• Using min-width instead of max-width for smaller screens
• Writing conditions without colon

3. Given this CSS, what background color will the body have on a screen 500px wide?

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

medium

A. Lightblue

B. White

C. No background color

D. Black

Solution

1. Step 1: Understand media query condition

   The media query applies styles when screen width is 600px or less. 500px is less than 600px, so it applies.

2. Step 2: Determine which background color applies

   The media query sets background to lightblue, overriding the default white for this screen size.

3. Final Answer:

   Lightblue -> Option A

4. Quick Check:

   Screen 500px ≤ 600px uses media query color [OK]

Hint: Check if screen width meets media query condition [OK]

Common Mistakes:

• Ignoring media query and picking default style
• Confusing max-width with min-width
• Assuming no style applies if media query exists

4. Identify the error in this media query CSS:

@media max-width: 800px { p { font-size: 1.2rem; } }

medium

A. Using max-width instead of min-width

B. Missing semicolon after font-size

C. Incorrect selector inside media query

D. Missing parentheses around the condition

Solution

1. Step 1: Check media query syntax

   The condition must be inside parentheses: @media (max-width: 800px).

2. Step 2: Verify other parts

   The selector p is valid, and semicolon is present. Using max-width is correct if targeting screens 800px or less.

3. Final Answer:

   Missing parentheses around the condition -> Option D

4. Quick Check:

   Media query conditions need parentheses [OK]

Hint: Always wrap media conditions in parentheses [OK]

Common Mistakes:

• Forgetting parentheses around conditions
• Confusing max-width and min-width usage
• Missing semicolons inside CSS blocks

5. You want a paragraph's font size to be 1.5rem on screens wider than 900px, and 1rem on smaller screens. Which CSS correctly achieves this?

hard

A. p { font-size: 1.5rem; } @media (max-width: 900px) { p { font-size: 1rem; } }

B. @media (max-width: 900px) { p { font-size: 1.5rem; } } p { font-size: 1rem; }

C. @media (min-width: 900px) { p { font-size: 1rem; } } p { font-size: 1.5rem; }

D. p { font-size: 1rem; } @media (min-width: 900px) { p { font-size: 1.5rem; } }

Solution

1. Step 1: Understand the requirement

   Font size should be 1.5rem on screens wider than 900px, and 1rem on smaller screens.

2. Step 2: Analyze each option

   p { font-size: 1.5rem; } @media (max-width: 900px) { p { font-size: 1rem; } } sets default font size to 1.5rem, then uses a media query with max-width 900px to reduce font size to 1rem on smaller screens. This matches the requirement.

3. Final Answer:

   p { font-size: 1.5rem; } @media (max-width: 900px) { p { font-size: 1rem; } } -> Option A

4. Quick Check:

   Default large, smaller inside max-width media query [OK]

Hint: Set default for large, override smaller with max-width query [OK]

Common Mistakes:

• Reversing min-width and max-width logic
• Setting default smaller and overriding larger incorrectly
• Missing default style outside media query