# User preference media queries — Responsive और Mobile-First Web Design

Source: https://www.geekswithgeeks.com/hi/responsive-design/user-preference-queries

> prefers-color-scheme और prefers-reduced-motion से user settings का सम्मान करें, और dvh units से full-height layouts बनाएँ।

## User settings का सम्मान करें

Media queries operating-system preferences पढ़ सकते हैं। `prefers-color-scheme` light या dark mode पहचानता है, `prefers-reduced-motion` कम animation चाहने वाले users को पहचानता है, और `prefers-contrast` अधिक contrast के अनुरोध को पहचानता है।

## Dark mode और reduced motion

Colours को CSS variables के रूप में define करें, dark mode के लिए उन्हें override करें और गैर-जरूरी motion बंद करें।

```css
:root { --bg: #fff; --text: #111; }

@media (prefers-color-scheme: dark) {
  :root { --bg: #111; --text: #eee; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* dvh avoids the mobile browser toolbar cutting off 100vh */
.hero { min-height: 100dvh; }
```

## दोनों modes test करें

DevTools में Rendering खोलें और `prefers-color-scheme` व `prefers-reduced-motion` emulate करें। दोनों themes में contrast जाँचें।

त्वरित जाँच

**Quiz:** कम animation चाहने वाले user को कौन-सा media feature पहचानता है?

- [x] prefers-reduced-motion
- [ ] prefers-color-scheme
- [ ] orientation
- [ ] hover

*Answer:* prefers-reduced-motion. prefers-reduced-motion: reduce OS की reduce-motion setting को दर्शाता है।