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.

Practice

1. What is the main purpose of using client:media in Astro components?

easy

A. To style components with CSS variables

B. To preload all components regardless of screen size

C. To disable JavaScript on mobile devices

D. To load components only when a specific media query matches

Solution

1. Step 1: Understand what client:media does

   client:media loads components conditionally based on media queries, meaning it only activates when the screen matches certain conditions.

2. Step 2: Compare options with this behavior

   To load components only when a specific media query matches this behavior exactly. Options B, C, and D describe unrelated or incorrect behaviors.

3. Final Answer:

   To load components only when a specific media query matches -> Option D

4. Quick Check:

   client:media loads components conditionally = A [OK]

Hint: Remember: client:media triggers only on matching screen sizes [OK]

Common Mistakes:

• Thinking client:media preloads all components
• Confusing client:media with CSS styling
• Assuming it disables JavaScript entirely

2. Which of the following is the correct syntax to load a component only on screens wider than 768px using client:media?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall correct media query syntax

   Media queries require parentheses around conditions, e.g., (min-width: 768px).

2. Step 2: Match syntax with options

   <Component client:media="(min-width: 768px)" /> uses correct parentheses and syntax. <Component client:media="min-width: 768px" /> misses parentheses. <Component client:media="screen and min-width: 768px" /> has incorrect syntax (missing parentheses around the condition). <Component client:media="(max-width: 768px)" /> uses max-width, which is the opposite condition.

3. Final Answer:

   <Component client:media="(min-width: 768px)" /> -> Option A

4. Quick Check:

   Correct media query syntax = B [OK]

Hint: Always wrap media queries in parentheses for client:media [OK]

Common Mistakes:

• Omitting parentheses around media queries
• Using max-width instead of min-width by mistake
• Adding unnecessary keywords like 'screen and'

3. Given this Astro component usage:

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

What happens when the screen width is 500px?

medium

A. The MyWidget component loads only on the server

B. The MyWidget component loads and runs on the client

C. The MyWidget component loads but does not run JavaScript

D. The MyWidget component does not load at all

Solution

1. Step 1: Understand the media query condition

   The media query (max-width: 600px) matches screen widths 600px or less.

2. Step 2: Check screen width against condition

   At 500px, the condition is true, so the component loads and runs on the client.

3. Final Answer:

   The MyWidget component loads and runs on the client -> Option B

4. Quick Check:

   Screen 500px matches max-width 600px = D [OK]

Hint: If screen matches query, component loads and runs client-side [OK]

Common Mistakes:

• Thinking component loads but does not run JavaScript
• Assuming component loads only on server
• Confusing max-width with min-width behavior

4. Identify the error in this Astro component usage:

<Sidebar client:media="min-width: 1024px" />

medium

A. Missing parentheses around the media query

B. Using client:media instead of client:load

C. Incorrect component name capitalization

D. Media query should be max-width, not min-width

Solution

1. Step 1: Check media query syntax

   The media query must be wrapped in parentheses, e.g., (min-width: 1024px).

2. Step 2: Verify other parts

   Component name capitalization is fine. Using client:media is correct for media queries. min-width is valid depending on intent.

3. Final Answer:

   Missing parentheses around the media query -> Option A

4. Quick Check:

   Media queries need parentheses = A [OK]

Hint: Always wrap media queries in parentheses to avoid syntax errors [OK]

Common Mistakes:

• Omitting parentheses in media queries
• Confusing client:media with client:load
• Changing media query type without reason

5. You want to load a navigation menu component only on screens between 600px and 1200px wide. Which client:media attribute correctly achieves this?

hard

A.

B.

C.

D.

Solution

1. Step 1: Understand the range condition

   You want the component to load only when the screen width is at least 600px and at most 1200px.

2. Step 2: Analyze each option's media query

   <NavigationMenu client:media="(min-width: 600px) and (max-width: 1200px)" /> correctly uses and to combine (min-width: 600px) and (max-width: 1200px). Options A and B have reversed or impossible ranges. <NavigationMenu client:media="(min-width: 600px) or (max-width: 1200px)" /> uses or, which matches too broadly.

3. Final Answer:

   <NavigationMenu client:media="(min-width: 600px) and (max-width: 1200px)" /> -> Option C

4. Quick Check:

   Use 'and' to combine min and max width = C [OK]

Hint: Use 'and' to combine min-width and max-width in client:media [OK]

Common Mistakes:

• Reversing min-width and max-width order
• Using 'or' instead of 'and' for range
• Creating impossible media query ranges