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.