# Orientation changes — उत्तरदायी और मोबाइल-प्रथम डिज़ाइन

Source: https://www.geekswithgeeks.com/hi/responsive-design/orientation-changes

> Orientation के लिए CSS media queries के साथ portrait-to-landscape transitions को gracefully handle करें।

## Device orientation का पता लगाना

Device rotate होने पर अलग-अलग styles लागू करने के लिए `@media (orientation: portrait)` या `@media (orientation: landscape)` का उपयोग करें।

## Rotation के लिए responsive

Portrait बनाम landscape mode के आधार पर content को hide या rearrange करें।

```css
/* Portrait: vertical layout */
@media (orientation: portrait) {
  .container { grid-template-columns: 1fr; }
}

/* Landscape: horizontal layout */
@media (orientation: landscape) {
  .container { grid-template-columns: 1fr 2fr; }
  .sidebar { display: none; } /* Sidebar too cramped in landscape */
}
```

## Landscape orientation को handle करना

Landscape के लिए layout adjust करें, sidebars hide करें, या content को reflow करें।

```css
@media (orientation: landscape) and (max-height: 500px) {
  .sidebar { display: none; }
  .header { padding: 8px 0; }
  main { max-height: 80vh; overflow-y: auto; }
}
```