{title}
{description}
...
;
}
```
**Correct:**
```tsx
// Container queries via Tailwind — no JS needed
function Card() {
return (
...
Content adapts to container
{isWide ?
);
}
```
## Responsive Images Pattern
```tsx
function ResponsiveImage({
src,
alt,
sizes = "(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
}: {
src: string;
alt: string;
sizes?: string;
}) {
return (
{/* Swipe-to-dismiss is progressive enhancement, not the only path */}
)
}
```
**Key rules:**
- Minimum touch target: 44x44px (iOS) / 48x48dp (Material) for all primary interactions
- WCAG 2.5.8 minimum: 24x24px when spacing buffer of 24px separates it from adjacent targets
- Icon buttons smaller than 44px must use `padding` or a pseudo-element to expand the tap area
- `user-scalable=no` and `maximum-scale=1` in viewport meta are WCAG accessibility violations — never use them
- Bottom 1/3 of screen = easy reach — primary actions and navigation belong here
- Prefer bottom tab bars over top navigation on mobile; FAB goes bottom-right
- Always pair swipe/long-press gestures with a visible button alternative
- Use `env(safe-area-inset-bottom)` on bottom nav and FABs to clear the home indicator
- Use `env(safe-area-inset-left/right)` in landscape to avoid side cutouts
- Never override native pinch-to-zoom behavior in CSS or JS
---
## References (2)
### Container Queries
# Container Queries Reference
## Container Types
```css
/* Size queries (width/height) */
container-type: inline-size; /* Query inline dimension */
container-type: size; /* Query both dimensions */
container-type: normal; /* No containment (default) */
/* Named container */
container-name: card;
/* Shorthand */
container: card / inline-size;
```
## Query Syntax
```css
/* Width queries */
@container (min-width: 400px) { }
@container (max-width: 399px) { }
@container (width > 400px) { }
@container (400px <= width <= 800px) { }
/* Named container queries */
@container card (min-width: 400px) { }
/* Logical properties */
@container (min-inline-size: 400px) { }
@container (min-block-size: 300px) { }
```
## Container Query Units
```css
/* Inline dimension (usually width) */
cqi /* 1% of container inline size */
/* Block dimension (usually height) */
cqb /* 1% of container block size */
/* Min/max of cqi and cqb */
cqmin
cqmax
/* Legacy (avoid - not logical) */
cqw /* Container width */
cqh /* Container height */
```
## Tailwind CSS v4 Integration
Container queries are built into Tailwind CSS v4 - no plugin required.
```html