CSS मीडिया क्वेरी क्या है?

CSS मीडिया क्वेरी एक तकनीक है जो आपको डिवाइस की विशेषताओं जैसे स्क्रीन आकार, रिज़ॉल्यूशन, ओरिएंटेशन, या कलर स्कीम के आधार पर अलग‑अलग स्टाइल लागू करने की अनुमति देती है। मीडिया क्वेरीज़ रिस्पॉन्सिव वेब डिज़ाइन की नींव हैं, जिससे वेबसाइटें अपने लेआउट और रूप‑रंग को विभिन्न डिवाइसों—स्मार्टफ़ोन से लेकर डेस्कटॉप मॉनिटर तक—पर अनुकूलित कर सकती हैं। ये CSS में @media नियम का उपयोग करके केवल तभी स्टाइल लागू करती हैं जब निर्दिष्ट शर्तें पूरी होती हैं।

टूल विवरण

यह टूल आपको जटिल सिंटैक्स याद किए बिना CSS मीडिया क्वेरीज़ उत्पन्न करने में मदद करता है। बस अपना लक्ष्य मीडिया टाइप चुनें, आयाम निर्दिष्ट करें, डिवाइस फीचर्स चुनें, और टूल पूर्ण @media नियम तैयार कर देगा जिसे आप अपनी स्टाइलशीट में सीधे उपयोग कर सकते हैं। यह सभी आधुनिक मीडिया क्वेरी फीचर्स का समर्थन करता है, जिसमें व्यूपोर्ट आयाम, स्क्रीन ओरिएंटेशन, एस्पेक्ट रेशियो, रिज़ॉल्यूशन डिटेक्शन, और कलर स्कीम प्रेफ़रेंसेज़ शामिल हैं।

विशेषताएँ

  • मीडिया टाइप चयन: सभी, स्क्रीन, प्रिंट, या स्पीच मीडिया टाइप्स में से चुनें
  • आयाम नियंत्रण: न्यूनतम और अधिकतम चौड़ाई/ऊँचाई को किसी भी CSS यूनिट (px, em, rem, vw, आदि) में सेट करें
  • डिवाइस फीचर्स: ओरिएंटेशन, एस्पेक्ट रेशियो, रिज़ॉल्यूशन, और कलर स्कीम प्रेफ़रेंसेज़ को कॉन्फ़िगर करें
  • कस्टम शर्तें: होवर क्षमता या पॉइंटर टाइप जैसी कोई भी कस्टम मीडिया फीचर जोड़ें
  • लॉजिकल ऑपरेटर्स: जटिल क्वेरीज़ के लिए शर्तों को AND, OR, या NOT ऑपरेटर्स के साथ संयोजित करें
  • लाइव प्रीव्यू: सेटिंग्स समायोजित करने पर उत्पन्न CSS कोड वास्तविक‑समय में अपडेट होते देखें
  • सामान्य ब्रेकपॉइंट्स रेफ़रेंस: मोबाइल, टैबलेट, डेस्कटॉप, और विशेष फीचर्स के लिए मानक ब्रेकपॉइंट्स तक त्वरित पहुँच

उपयोग के मामले

  • विभिन्न स्क्रीन आकारों के अनुसार अनुकूलित रिस्पॉन्सिव लेआउट बनाना
  • टैबलेट या स्मार्टफ़ोन जैसे विशिष्ट डिवाइस को टार्गेट करना
  • डार्क मोड और लाइट मोड थीम लागू करना
  • प्रिंट स्टाइलशीट्स को अनुकूलित करना
  • हाई‑रिज़ॉल्यूशन (रेटिना) डिस्प्ले का पता लगाना
  • डिवाइस ओरिएंटेशन के आधार पर लेआउट समायोजित करना
  • मोबाइल‑फ़र्स्ट या डेस्कटॉप‑फ़र्स्ट रिस्पॉन्सिव डिज़ाइन बनाना
  • CSS मीडिया क्वेरी सिंटैक्स का परीक्षण और सीखना