Why client:media for responsive interactivity in Astro? - Purpose & Use Cases

The Big Idea

Discover how to make your website smartly adapt to any screen without writing messy resize code!

The Scenario

Imagine building a website that changes how it looks and behaves depending on the screen size, like showing a menu button on phones but a full menu on desktops.

Doing this manually means writing lots of JavaScript to watch screen size changes and update the page, which can get messy fast.

The Problem

Manually tracking screen size with JavaScript is slow and complicated.

You have to write extra code to listen for window resizing, update styles or elements, and keep everything in sync.

This often leads to bugs and poor performance, especially on slower devices.

The Solution

The client:media feature in Astro lets you easily run code only when certain screen sizes or media conditions are met.

This means your interactive parts automatically respond to screen changes without extra messy code.

Before vs After

✗ Before

window.addEventListener('resize', () => { if(window.innerWidth < 600) showMobileMenu(); else showDesktopMenu(); });

✓ After

<Menu client:media="(max-width: 600px)" />

What It Enables

You can build fast, clean, and responsive interactive components that adapt perfectly to different devices without extra JavaScript hassle.

Real Life Example

On a shopping site, the product filter panel can appear as a sidebar on desktop but as a slide-in drawer on mobile, all handled smoothly with client:media.

Key Takeaways

Manual screen size handling is complex and error-prone.

client:media runs code only on matching screen sizes automatically.

This makes responsive interactivity simple, clean, and efficient.