🛀🏽 🥒 😙 मीडिया क्वेरी का उपयोग करने के लिए टिप्स 🎭 ◽️ 🔸

प्रविष्टि

लेख में, मैंने मीडिया क्वेरी का उपयोग करने के लिए सुझाव एकत्र किए। मैं आपको बताता हूं कि मीडिया क्वेरी का यथासंभव कुशलता से उपयोग कैसे करें। लेख के अंत में उपयोग किए गए स्रोतों की एक सूची है।

बाहरी कनेक्शन मीडिया क्वेरी
केवल व्यूपोर्ट आकार से अधिक
स्मार्टफोन ही नहीं
मीडिया क्वेरी टूल
विशिष्ट हाइलाइट करें
ब्रेकपॉइंट कब और कितना?
मामूली विराम बिंदु
सापेक्ष इकाइयाँ
सशर्त डाउनलोड
प्रयुक्त संसाधनों की सूची

बाहरी कनेक्शन मीडिया क्वेरी

< link href="test.css" rel="stylesheet" media="only screen and (max-width:480px)" />

मीडिया क्वेरी का समर्थन नहीं करने वाले ब्राउज़र इन शैलियों को लोड नहीं करेंगे, लेकिन समर्थन ब्राउज़र सब कुछ लोड करेंगे चाहे वे आवश्यक हों या नहीं।

लेकिन फिर भी एक विशेषता है - ब्राउज़र शैलियों में परिभाषित पृष्ठभूमि छवियों को लोड नहीं करता है जो वर्तमान में उपयोग में नहीं हैं।

 < link href="css/test1.css" rel="stylesheet" media="only screen and (max-width:480px)" /> < link href="css/test2.css" rel="stylesheet" media="only screen and (min-width:480px)" />

test1.css

 body { background: url("../img/bg1.png"); }

test2.css

 body{ background: url("../img/bg2.png"); }

स्क्रीन के आकार के आधार पर, एक पृष्ठभूमि छवि लोड की जाएगी।

केवल व्यूपोर्ट आकार से अधिक

व्यूपोर्ट की चौड़ाई एकमात्र ऐसी चीज नहीं है जिसे मीडिया क्वेरी का उपयोग करके निर्धारित किया जा सकता है। कई अन्य कार्य हैं जिन्हें परिभाषित किया जा सकता है, जिनमें शामिल हैं: डिवाइस अनुपात, अभिविन्यास, रिज़ॉल्यूशन, पिक्सेल घनत्व और बहुत कुछ।

उनमें से कई बहुत उपयोगी हैं:

- यदि आप उच्च पिक्सेल घनत्व वाले स्क्रीन के लिए अनुकूलित पृष्ठभूमि चित्रों और आइकन का उपयोग करना चाहते हैं तो पिक्सेल घनत्व उपयोगी है।

- अभिविन्यास पल में चित्र या परिदृश्य मोड में डिवाइस को निर्धारित करता है। इसका उपयोग कुछ तत्वों की निश्चित स्थिति को निष्क्रिय करने के लिए किया जा सकता है।

- ऊंचाई उपलब्ध ऊंचाई, अनुकूलन के लिए इस्तेमाल किया जा सकता है ताकि सामग्री एक स्क्रीन में अंतराल के बिना पूरी तरह से प्रदर्शित हो।

मैं एक पूरी सूची के लिए प्रलेखन का जिक्र करने की सलाह देता हूं, मुझे लगता है कि यह आपके इंटरफ़ेस को अधिक लचीला बनाने में आपकी सहायता करेगा।

स्मार्टफोन ही नहीं

क्या आपने देखा है कि आधुनिक बड़े मॉनिटरों पर कुछ साइटें कितनी बदसूरत दिखती हैं? मीडिया क्वेरी से संबंधित पहला संघ केवल स्मार्टफ़ोन के लिए एक इंटरफ़ेस बनाना है। मीडिया क्वेरी और मल्टी कॉलम का संयोजन आपकी साइट को बड़े मॉनिटर पर खूबसूरती से प्रदर्शित करने में मदद करेगा।

आप कितनी बार इस तरह के ब्रेकपॉइंट का उपयोग करते हैं?

 @media all and (min-width: 1300px) { /* ... */ }

मीडिया क्वेरी टूल

कई ब्राउज़र प्लगइन्स हैं जो उत्तरदायी डिजाइन विकसित करने में मदद करते हैं, लेकिन मेरे अनुभव में सबसे अच्छा उपकरण उत्तरदायी मोड है, जो फ़ायरफ़ॉक्स के संस्करण 15 के साथ जोड़ा गया था।

विशिष्ट हाइलाइट करें

मीडिया क्वेरी की कमी वास्तव में मीडिया क्वेरी है। यह टिप मोबाइल-पहली रणनीति का हिस्सा है, जिसके अनुसार। बजाय:

 /* Desktop-first */ .column { float: left; width: 30%; } @media all and (max-width: 40em) { .column { float: none; width: auto; } }

केवल विशिष्ट नियमों को परिभाषित करना बेहतर है जहां केवल आवश्यक हो:

 /* Mobile-first */ @media all and (min-width: 40em) { .column { float: left; width: 30%; } }

नतीजतन, हमें कोड बनाए रखने के लिए सरल और आसान मिला। इसके अलावा, ऐसे कोड पुराने मोबाइल ब्राउज़र के लिए अधिक उपयुक्त हैं जो मीडिया क्वेरी का समर्थन नहीं करते हैं।

ब्रेकपॉइंट कब और कितना?

इसलिए, ऐतिहासिक रूप से, ब्रेकप्वाइंट को लोकप्रिय उपकरणों के आकार से बांधा गया है। (iPhone = 320px चित्र, 480px = iPhone परिदृश्य, आदि)। लेकिन अब हम जो देखते हैं - उपकरणों के आकार लगातार बदल रहे हैं, गैर-मानक आकारों के साथ अधिक से अधिक डिवाइस हैं। जैसे मानक क्या है वेब लगातार विकसित हो रहा है, इसलिए यह हमारा काम है कि किसी भी स्क्रीन पर देखने और काम करने के लिए इंटरफेस बनाना।

तो ब्रेकपॉइंट्स को कहां रखा जाए और कितने की जरूरत है?

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

मामूली विराम बिंदु

कभी-कभी ऐसा होता है कि सभी डिज़ाइन तत्व कुछ निश्चित बिंदुओं में फिट नहीं होते हैं। यही है, बहुत अधिक वैश्विक परिवर्तन हो रहे हैं और दो तरीके हैं: पहला, बहुत वांछनीय नहीं, पहले से परिभाषित ब्रेकप्वाइंट को बदलने या डिज़ाइन को बदलने के लिए; और दूसरा, अधिक व्यावहारिक, वैश्विक ब्रेकपॉइंट के भीतर माध्यमिक ब्रेकप्वाइंट की पहचान करने के लिए।

एक तरफ, यह शैलियों को जटिल बनाता है, लेकिन कोई भी यह नहीं कहता है कि आप सभी तत्वों के लिए मामूली ब्रेकप्वाइंट का उपयोग करेंगे। जहां आपको लचीलापन की कमी है, वहीं इस्तेमाल करें।

सापेक्ष इकाइयाँ

निश्चित आकारों का उपयोग करने के बजाय, ब्रेकप्वाइंट को परिभाषित करने के लिए रिश्तेदार इकाइयों का उपयोग करना बेहतर है। लेआउट में सापेक्ष आकारों के उपयोग का विषय पहले से ही हब पर बार-बार प्रकट किया गया है। यहाँ लेखों की एक आंशिक सूची है: यहाँ, यहाँ, यहाँ। मैं केवल सबसे महत्वपूर्ण तर्क दूंगा - यह ब्राउज़र को उपयोगकर्ता द्वारा स्थापित ज़ूम आकार के स्तर के आधार पर डिज़ाइन को बदलने की अनुमति देगा, जिसके परिणामस्वरूप उपयोगकर्ता को देखने के लिए अधिक सुखद, अधिक सुलभ साइट दिखाई देगी।

सशर्त डाउनलोड

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

इसके लिए हम matchMedia का उपयोग कर सकते हैं। मैचमीडिया हमारी जावास्क्रिप्ट को मीडिया क्वेरी के माध्यम से उपलब्ध सभी संपत्तियों को निर्धारित करने की अनुमति देता है।

यह कुछ इस तरह दिखता है:

 if (window.matchMedia("(min-width: 60em)").matches) { /* load something */ }

एक वैकल्पिक तकनीक भी खोज के लायक है।

मीडिया क्वेरी का उपयोग करने के लिए टिप्स