व्यूपोर्ट मीडिया क्वेरी जनरेटर
उत्तरदायी वेब डिज़ाइन के लिए सीएसएस मीडिया क्वेरी उत्पन्न करें।
मीडिया क्वेरी सेटिंग्स
मीडिया क्वेरी शर्तों को कॉन्फ़िगर करें
शर्त 1
प्रीसेट
आमतौर पर उपयोग किए जाने वाले मीडिया क्वेरी पैटर्न चुनें
उत्पन्न सीएसएस
@media screen and (max-width: 768px) {
/* Your CSS rules here */
}सामान्य ब्रेकपॉइंट
मोबाइल:
max-width: 480pxटैबलेट:
481px - 768pxडेस्कटॉप:
min-width: 1024pxबड़ा डेस्कटॉप:
min-width: 1200pxमीडिया क्वेरी गाइड
मुख्य मीडिया सुविधाएँ
- • चौड़ाई/ऊंचाई: व्यूपोर्ट चौड़ाई/ऊंचाई
- • min-width/max-width: न्यूनतम/अधिकतम चौड़ाई की शर्तें
- • अभिविन्यास: स्क्रीन अभिविन्यास (पोर्ट्रेट/लैंडस्केप)
- • रिज़ॉल्यूशन: स्क्रीन रिज़ॉल्यूशन (रेटिना डिस्प्ले, आदि)
- • होवर: होवर क्षमता समर्थन
- • पॉइंटर: पॉइंटर सटीकता (टच/माउस)
उपयोग युक्तियाँ
- • मोबाइल फर्स्ट दृष्टिकोण: छोटे स्क्रीन से डिज़ाइन करने के लिए min-width का उपयोग करें
- • तार्किक ऑपरेटरों के साथ जटिल शर्तों को मिलाएं
- • अलग प्रिंट शैलियों के लिए प्रिंट मीडिया प्रकार का उपयोग करें
- • उच्च-रिज़ॉल्यूशन डिस्प्ले समर्थन के लिए रिज़ॉल्यूशन का उपयोग करें