CSS मीडिया क्वेरीज से रेस्पॉन्सिव नेविगेशन मेनू बनाएं

CSS मीडिया क्वेरीज (@media) का उपयोग करके विभिन्न डिवाइस स्क्रीन आकारों (मोबाइल, टैबलेट, डेस्कटॉप) के लिए अलग-अलग स्टाइल्स लागू की जा सकती हैं। यह रेस्पॉन्सिव वेब डिजाइन का मूलभूत तकनीक है।

उदाहरण

नीचे दिए गए उदाहरण में, 600px से कम चौड़ाई वाले स्क्रीन पर नेविगेशन लिंक्स वर्टिकल स्टैक हो जाते हैं (फ्लोट हटाकर फुल चौड़ाई)।

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
    .demo {
      overflow: hidden;
      background-color: blue;
    }
    .demo a {
      float: left;
      display: block;
      color: white;
      text-align: center;
      padding: 10px;
      text-decoration: none;
    }
    @media screen and (max-width: 600px) {
      .demo a {
        float: none;
        width: 100%;
      }
    }
  </style>
</head>
<body>
  <p>Navigation Menu:</p>
  <div class="demo">
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Tutorials</a>
    <a href="#">QA</a>
    <a href="#">Videos</a>
    <a href="#">Contact</a>
  </div>
</body>
</html>

मुख्य घटक:

• <meta name="viewport"> - मोबाइल पर सही स्केलिंग के लिए आवश्यक
• @media screen and (max-width: 600px) - 600px तक की चौड़ाई के लिए स्टाइल्स
• float: none; width: 100% - मोबाइल पर वर्टिकल स्टैक

सामान्य ब्रेकपॉइंट्स: 576px (मोबाइल), 768px (टैबलेट), 992px (लैपटॉप), 1200px (डेस्कटॉप)।