client:media for responsive interactivity in Astro - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is client:media in Astro Framework?

client:media is a directive in Astro that loads a component only when a specific media query matches, enabling responsive interactivity.

beginner

How does client:media improve website performance?

It delays loading interactive components until the user's device matches the media query, reducing unnecessary JavaScript and speeding up initial load.

beginner

Write an example of using client:media to load a component only on screens wider than 768px.

<MyComponent client:media="(min-width: 768px)" />

intermediate

What happens if the media query in client:media does not match?

The component does not load or run its JavaScript, so it stays static or is not rendered interactively.

intermediate

Can client:media be used with multiple media queries?

Yes, you can use any valid CSS media query string, including combined queries like (min-width: 600px) and (orientation: landscape).

What does client:media="(max-width: 600px)" do in Astro?

A Loads the component only on screens wider than 600px

B Loads the component only on screens 600px wide or smaller

C Loads the component on all screen sizes

D Prevents the component from loading on any screen

The media query (max-width: 600px) matches screens 600px wide or smaller, so the component loads only on those.

Which benefit does client:media provide?

A Delays loading components until media query matches

B Improves SEO by hiding components

C Automatically styles components based on screen size

D Preloads all components regardless of screen size

client:media delays loading interactive components until the media query matches, improving performance.

If a component uses client:media="(min-width: 1024px)", when will it load?

A Only on screens narrower than 1024px

B Never loads

C Only on screens 1024px wide or wider

D On all screen sizes

The (min-width: 1024px) media query matches screens 1024px wide or wider, so the component loads only then.

Can client:media be used to load components based on device orientation?

A No, it only works with width and height

B Only on mobile devices

C Only on desktop devices

D Yes, it supports any valid CSS media query

client:media accepts any valid CSS media query, including orientation queries like orientation: landscape.

What happens if the media query changes after the page loads?

A The component automatically loads or unloads accordingly

B The component loads only once and does not react to changes

C The page reloads automatically

D The component crashes

client:media listens for media query changes and loads or unloads the component dynamically as the query matches or stops matching.

Explain how client:media helps create responsive interactive components in Astro.

Think about when and why components load depending on screen size or device features.

Describe a real-life scenario where using client:media would improve user experience.

Consider how different devices or screen sizes might need different interactive parts.