# Media Queries

Use media queries to create responsive layouts.

## Mobile-First Approach

By default, all base utilities support responsive variants. Use breakpoints like `@xs:*`, `@sm:*`, `@md:*`, `@lg:*`, `@xl:*` & `@xxl:*` to apply specific rules to different screen sizes.

```tsx ins={2} del={1}
<h1 className="… @sm:ta:c">Good evening!</h1>
<h1 className="ta:c … @sm:ta:l">Good evening!</h1>
```

Yumma CSS breakpoints reference:

| Prefix | Min Width | CSS Rule |
| - | - | - |
| `@xs` | `32 rem` (512 px) | `@media (min-width: 32 rem)` |
| `@sm` | `40 rem` (640 px) | `@media (min-width: 40 rem)` |
| `@md` | `48 rem` (768 px) | `@media (min-width: 48 rem)` |
| `@lg` | `64 rem` (1024 px) | `@media (min-width: 64 rem)` |
| `@xl` | `80 rem` (1280 px) | `@media (min-width: 80 rem)` |
| `@xxl` | `96 rem` (1536 px) | `@media (min-width: 96 rem)` |

### Customize Breakpoints

You can extend or override the default media query breakpoints using the `theme.screens` configuration option in your `yumma.config.mjs` file.

**1. Create a config file**

```mjs title="yumma.config.mjs" mark={4-8}
import { defineConfig } from "yummacss";

export default defineConfig({
  theme: {
    screens: {
      "3xl": "112rem",
    },
  },
});
```

**2. Use Custom Breakpoints**

The bundler plugins & `yummacss watch` pick up config changes automatically.

```tsx "@3xl:d:b"
<div className="d:none @3xl:d:b"></div>
```

## Use Media Queries

Resize your browser window to see how these elements respond to viewport width.

```tsx "@sm:d:b" "@md:d:b" "@lg:d:b" "@xl:d:b" "@xxl:d:b"
<p className="d:b … @sm:d:none">Small screen</p>
<p className="d:none @md:d:none … @sm:d:b">Medium screen</p>
<p className="d:none @lg:d:none … @md:d:b">Large screen</p>
<p className="d:none @xl:d:none … @lg:d:b">Extra large screen</p>
<p className="d:none … @xxl:d:b">Double extra large screen</p>
```

## Touch Devices

The `@pc:*` variant targets devices with a coarse pointer (typically touch screens). Use this to apply larger tap targets & touch-friendly spacing.

> Activates on touch-enabled devices with coarse pointer input.

```tsx "@pc:p:6"
<button type="button" className="p:4 bg:indigo c:white @pc:p:6">
  Larger padding on touch devices
</button>
```

Touch Device Reference:

| Prefix | Media Query | Description |
| - | - | - |
| `@pc:` | `@media (pointer: coarse)` | Touch devices |

## Reduced Motion

The `@prm:*` variant applies when someone has asked their system for less motion. Use it to stop an animation or a transition.

```tsx "@prm:tp:none"
<div className="tp:o tdu:150 @st:o:0 @prm:tp:none">Saved</div>
```

## Container Queries

To respond to the width of a parent instead of the window, use [Container Queries](/docs/container-queries): `@c:sm:*` & the rest of the breakpoint names.