पाठ 14 / 25

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 करें।

/* 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 करें।

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