# media

> The explicit escape hatch for a real viewport/feature media query, for a rule that must read the viewport or a user preference.

```ts
import { media } from "@sdxc/u/responsive";
```

The explicit escape hatch for a real viewport/feature media query, for a
rule that must read the viewport or a user preference. `u.at()` handles
container-based responsive layout.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.media("(prefers-contrast: more)", u.border("brand.strong"))` | `css({ "@media (prefers-contrast: more)": { borderColor: "..." } })` |

## Examples

### Basic example

Use `media(query, ...)` to apply utilities under any media query, like `media("(min-width: 48rem)", ...)` for the viewport width. Resize your browser window to see the grid change:

```tsx
<div
	mix={[grid(), gap(4), media("(min-width: 48rem)", gridTemplate({ columns: repeat(3, 1) }))]}
>
	<div mix={[...]}>01</div>
	<div mix={[...]}>02</div>
	<div mix={[...]}>03</div>
</div>
```

### Querying a device feature

Query a device feature, like `media("(pointer: coarse)", ...)`, to give touch screens larger targets. Open the page on a phone, or emulate touch in your browser's dev tools:

```tsx
<div mix={[...]}>
	<button
		type="button"
		mix={[
			bg("brand.solid"),
			fg("brand.onSolid"),
			media("(pointer: coarse)", [minBs(11), minIs(11)]),
			...,
		]}
	>
		Like
	</button>
	<button
		type="button"
		mix={[
			bg("neutral.tint"),
			fg("neutral.emphasis"),
			media("(pointer: coarse)", [minBs(11), minIs(11)]),
			...,
		]}
	>
		Share
	</button>
</div>
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.media("(prefers-contrast: more)", u.border("brand.strong")))
```

## Signature

```ts
u.media(query: string, input: UtilityInput<Node>)
```