Astro
client:media
client:media is the Astro directive that hydrates an island only when a CSS media query matches. A mobile menu that never runs on desktop is the usual case.
How it is measured
Write the query as the directive value, such as client:media="(max-width: 50em)". The island's HTML still renders on the server for all viewports. The JavaScript downloads only if the query matches, and again if the window later changes to match.
Test by loading the page at two widths and checking the network panel. At 1280 pixels the component chunk should not appear. At 390 pixels it should.
Worked example
A city transit site has a hamburger menu built in Vue. It uses client:media="(max-width: 48em)". Desktop visitors, about 58 percent of pageviews on a commuter site, never download the 14 KB menu script.
A tablet user rotates from portrait to landscape, crossing 48em, and the menu hydrates then. The CSS hides the desktop nav at that same width so there is no gap.
How it differs
client:media gates hydration on a viewport condition. client:visible gates it on the island appearing on screen. A media query excludes devices; visibility excludes what the visitor has not scrolled to.
Common errors
Matching the query to JavaScript but not to the CSS that hides the markup. Assuming the HTML is absent when the query fails. Using a query tied to print or color scheme by mistake. Expecting hydration to undo when the window shrinks. Forgetting a fallback for desktop.
In practice
Pair each client:media island with the CSS that shows or hides its markup, using the same breakpoint. Put the breakpoint in one shared constant. Test by dragging the window across it.