एक सफल वेबसाइट के लिए एक उपयोगी, सुलभ अनुभव महत्वपूर्ण है। यदि आपके पाठकों के पास सकारात्मक अनुभव है, तो उनके द्वारा उत्पादों की खरीद सहित कार्रवाई करने की अधिक संभावना है। वे आपकी साइट पर वापस लौटने या दूसरों को अनुशंसा करने की भी अधिक संभावना रखते हैं। अनुभव प्रमुख है।
मीडिया क्वेरीज़ विभिन्न CSS सुविधाएँ प्रदान करती हैं जो आपकी वेबसाइट को अनुकूलित कर सकती हैं। वे आपको प्रत्येक उपयोगकर्ता के अनुभव को उनके डिवाइस की क्षमताओं के आधार पर तैयार करने देते हैं। अपने पाठकों को सर्वोत्तम अनुभव देने का तरीका जानें, चाहे वे अपने फ़ोन का उपयोग कर रहे हों या किसी बड़े डेस्कटॉप मॉनीटर का।
1. सूचक सुविधा
@मीडिया नियम इसमें एक पॉइंटर सुविधा है जो आपको प्राथमिक पॉइंटिंग डिवाइस के आधार पर अपने डिज़ाइन को अनुकूलित करने की अनुमति देती है। आप उपलब्धता और गुणवत्ता के लिए परीक्षण कर सकते हैं।
यह सूचक मीडिया क्वेरी सुविधा तीन मानों में से एक लेता है: कोई नहीं, मोटे, या ठीक। कोई नहीं कोई पॉइंटिंग डिवाइस न होने पर मान लागू होता है। खुरदुरा मान तब लागू होता है जब प्राथमिक पॉइंटिंग डिवाइस में सटीकता का स्तर कम होता है। और यह ठीक मान तब लागू होता है जब प्राथमिक पॉइंटिंग डिवाइस में उच्च स्तर की सटीकता होती है।
सूचक सुविधा का उपयोग करना
सूचक
विकल्प एक
विकल्प दो
उपरोक्त कोड दो इनपुट रेडियो विकल्प उत्पन्न करता है, जो कंप्यूटर के प्राथमिक पॉइंटिंग डिवाइस की सटीकता के आधार पर अलग-अलग होंगे।
एक सटीक (या उच्च गुणवत्ता वाला) प्राथमिक पॉइंटिंग डिवाइस वाला कंप्यूटर निम्नलिखित वेब पेज प्रदर्शित करेगा:
एक कंप्यूटर जिसमें सीमित सटीकता (या कम गुणवत्ता) वाला प्राथमिक उपकरण है, वह निम्नलिखित वेब पेज प्रदर्शित करेगा:
जिस डिवाइस में सीमित स्तर की सटीकता के साथ प्राथमिक पॉइंटिंग डिवाइस होता है, उसमें बड़े रेडियो बटन होते हैं। यह ऐसे यूजर्स के लिए बेहतर यूजर एक्सपीरियंस देता है। सूचक सुविधा के साथ, आप यह सुनिश्चित कर सकते हैं कि आपके सभी उपयोगकर्ताओं को उनके डिवाइस की परवाह किए बिना एक सुखद अनुभव हो।
2. कोई भी सूचक सुविधा
पॉइंटर फ़ीचर की तरह कोई भी-पॉइंटर मीडिया क्वेरी फ़ीचर पॉइंटिंग डिवाइसेस को लक्षित करता है। हालांकि, कोई भी पॉइंटर फीचर कंप्यूटर के हर पॉइंटिंग डिवाइस का मूल्यांकन करता है। एनी-पॉइंटर फीचर भी का उपयोग करता है कोई नहीं, खुरदुरा, तथा ठीक मूल्य।
किसी भी सूचक सुविधा का उपयोग करना
@मीडिया (कोई भी सूचक: ठीक) {
इनपुट [प्रकार = "रेडियो"] {
चौड़ाई: 15 पीएक्स;
ऊंचाई: 15 पीएक्स;
सीमा-त्रिज्या: 20px;
सीमा-चौड़ाई: 1px;
}
}
@मीडिया (कोई भी सूचक: मोटे) {
इनपुट [प्रकार = "रेडियो"] {
चौड़ाई: 25px;
ऊंचाई: 25 पीएक्स;
सीमा-त्रिज्या: 20px;
सीमा-चौड़ाई: 2px;
}
}
आप पॉइंटर फीचर उदाहरण में कोड के मीडिया क्वेरी सेक्शन के साथ ऊपर दिए गए कोड को आसानी से बदल सकते हैं। उपरोक्त कोड किसी भी पॉइंटिंग डिवाइस की गुणवत्ता के आधार पर एक उपयुक्त डिस्प्ले प्रस्तुत करता है जो कंप्यूटर में हो सकता है।
3. होवर फ़ीचर
होवर मीडिया क्वेरी फीचर यह मूल्यांकन करता है कि डिवाइस का प्राथमिक इनपुट तंत्र UI में तत्वों पर होवर करने में सक्षम है या नहीं।
होवर फ़ीचर का उपयोग करना
/* सीएसएस */
ए{
पाठ-सजावट: कोई नहीं;
रंग काला;
}
@मीडिया (होवर: होवर) {
ए: होवर {
नीला रंग;
}
}
एचटीएमएल
एक लिंक तत्व
उपरोक्त कोड प्रदर्शित करेगा a तत्व। जब भी किसी उपकरण का प्राथमिक इनपुट तंत्र (जो होवर करने का समर्थन करता है) उसके ऊपर मंडराता है तो यह रंग (काले से नीले रंग में) बदल जाएगा।
4. किसी भी होवर फ़ीचर
कोई भी होवर मीडिया क्वेरी प्राथमिक इनपुट तंत्र सहित किसी भी इनपुट तंत्र को लक्षित करती है।
किसी भी होवर सुविधा का उपयोग करना
@मीडिया (कोई भी होवर: होवर) {
ए: होवर {
नीला रंग;
}
}
उपरोक्त मीडिया क्वेरी किसी भी इनपुट तंत्र के लिए होवर प्रभाव उत्पन्न करती है जो किसी तत्व पर होवर करने में सक्षम है।
5. संकल्प फ़ीचर
रिज़ॉल्यूशन मीडिया क्वेरी सुविधा किसी विशिष्ट डिवाइस द्वारा प्रदर्शित पिक्सेल की संख्या की गणना करती है। एक उपकरण जो प्रति इंच अधिक पिक्सेल प्रदर्शित करता है उसका रिज़ॉल्यूशन बेहतर होता है क्योंकि यह छवियों को अधिक विवरण के साथ प्रदर्शित करता है। यह सुविधा एक डेवलपर को यह तय करने में मदद कर सकती है कि कौन से डिवाइस उपयोगकर्ता UI में तत्वों को अधिक स्पष्ट रूप से देख सकते हैं।
रिज़ॉल्यूशन सुविधा रेंज का उपयोग करती है। इसका मतलब है कि साथ ही साथ का उपयोग करना संकल्प कीवर्ड, आप उपयोग कर सकते हैं न्यूनतम संकल्प तथा अधिकतम संकल्प. मीडिया क्वेरी रिज़ॉल्यूशन सुविधा रिज़ॉल्यूशन डेटा प्रकार से संबंधित है। इसका मतलब यह है कि रिज़ॉल्यूशन फीचर तीन इकाइयों में से एक में मापने योग्य है: डॉट्स प्रति इंच (डीपीआई), डॉट्स प्रति सेंटीमीटर (डीपीसीएम), या डॉट्स प्रति पिक्सल (डीपीपीएक्स)।
संकल्प सुविधा का उपयोग करना
/* सीएसएस */
@मीडिया (न्यूनतम-रिज़ॉल्यूशन: 72डीपीआई) {
पी {
रंग सफेद;
पृष्ठभूमि-रंग: नीला;
}
}
एचटीएमएल
लोरेम इप्सम डोलर सिट, एमेट कंसेक्टेटूर एडिपिसिसिंग एलीट।
एक डिवाइस में न्यूनतम रिज़ॉल्यूशन 72dpi हो सकता है और अभी भी गुणवत्ता वाली छवियां प्रदर्शित कर सकता है। इसलिए, यदि किसी उपकरण का रिज़ॉल्यूशन 72dpi या अधिक है, तो वह अपने ब्राउज़र में निम्न आउटपुट प्रदर्शित करेगा:
6. अभिविन्यास सुविधा
डिवाइस व्यूपोर्ट में केवल दो ओरिएंटेशन में से एक हो सकता है: चित्र या परिदृश्य. आपको ध्यान देना चाहिए कि व्यूपोर्ट ओरिएंटेशन डिवाइस ओरिएंटेशन से अलग है। यदि कोई उपकरण सॉफ्ट कीबोर्ड का उपयोग करता है, तो इसका व्यूपोर्ट पोर्ट्रेट से लैंडस्केप में बदल सकता है, जबकि डिवाइस अभी भी पोर्ट्रेट स्थिति में है।
अभिविन्यास सुविधा का उपयोग करना
/* सीएसएस */
तन{
प्रदर्शन: फ्लेक्स;
}
अनुभाग{
सीमा: 2px ठोस नीला;
पैडिंग: 3px;
मार्जिन: 3px;
}
@मीडिया (ओरिएंटेशन: लैंडस्केप) {
तन {
फ्लेक्स-दिशा: पंक्ति;
}
}@मीडिया (ओरिएंटेशन: पोर्ट्रेट) {
तन {
फ्लेक्स-दिशा: स्तंभ;
}
}
एचटीएमएललोरेम इप्सम, डोलर सिट एमेट कंसेक्टेटूर एडिपिसिसिंग एलीट। लोरेम इप्सम, डोलर सिट एमेट कंसेक्टेटूर एडिपिसिसिंग एलीट। लोरेम इप्सम, डोलर सिट एमेट कंसेक्टेटूर एडिपिसिसिंग एलीट।
ऊपर दिया गया कोड किसी डिवाइस के ओरिएंटेशन के आधार पर वेबपेज के लेआउट को बदल देता है।
लैंडस्केप मोड में व्यूपोर्ट वाला एक उपकरण निम्नलिखित वेबपेज प्रदर्शित करेगा:
पोर्ट्रेट मोड में व्यूपोर्ट वाला डिवाइस निम्न वेबपेज प्रदर्शित करेगा:
7. ऊंचाई फ़ीचर
ऊंचाई मीडिया क्वेरी सुविधा आपको उपयोगकर्ता के डिवाइस की व्यूपोर्ट ऊंचाई के आधार पर सीएसएस स्टाइल निर्दिष्ट करने की अनुमति देती है। यह सुविधा रेंज का समर्थन करती है, इसलिए आप इसका भी उपयोग कर सकते हैं मिनट-ऊंचाई तथा अधिकतम ऊँचाई खोजशब्द।
ऊंचाई सुविधा का उपयोग करना
/* सीएसएस */
@मीडिया (न्यूनतम-ऊंचाई: 360px) {
पी{
सीमा: 2px बिंदीदार नारंगी;
}}
एचटीएमएल
लोरेम इप्सम डोलर सिट एमेट कंसेक्टेटूर एडिपिसिसिंग एलीट।
ऊपर दिया गया कोड उपयोगकर्ता द्वारा अपने डिवाइस की ऊंचाई के आधार पर जो देखता है उसे अनुकूलित करता है। 360px और उससे अधिक की डिवाइस ऊंचाई वाले उपयोगकर्ताओं को निम्न वेबपृष्ठ जैसा कुछ दिखाई देगा:
360px से कम ऊंचाई वाले डिवाइस वेबपेज पर अनुच्छेद के चारों ओर बॉर्डर प्रदर्शित नहीं करेंगे।
8. चौड़ाई फ़ीचर
चौड़ाई मीडिया क्वेरी सुविधा आपको उपयोगकर्ता के डिवाइस की व्यूपोर्ट चौड़ाई के आधार पर विशिष्ट सीएसएस स्टाइल बनाने की अनुमति देती है। यह सुविधा रेंज का भी समर्थन करती है, इसलिए आपके पास इसका उपयोग करने का विकल्प है न्यूनतम-चौड़ाई तथा अधिकतम चौड़ाई खोजशब्द।
चौड़ाई सुविधा का उपयोग करना
/* सीएसएस */
@मीडिया (न्यूनतम-चौड़ाई: 600px) {
पी{
सीमा: 2px ठोस बैंगनी;
}
}
एचटीएमएल
लोरेम इप्सम डोलर सिट एमेट कंसेक्टेटूर एडिपिसिसिंग एलीट।
ऊपर दिया गया कोड उपयोगकर्ता द्वारा अपने डिवाइस की चौड़ाई के आधार पर जो देखता है उसे अनुकूलित करता है। 600px और अधिक की डिवाइस चौड़ाई वाले उपयोगकर्ताओं को निम्न वेबपृष्ठ जैसा कुछ दिखाई देगा:
चौड़ाई और ऊंचाई-आधारित मीडिया प्रश्नों का उपयोग करना एक प्रभावी रणनीति हो सकती है अपनी वेबसाइट को उत्तरदायी बनाना.
9. रंग सुविधा
रंग मीडिया क्वेरी सुविधा डिवाइस के रंग घटक (लाल, हरा, नीला) का मूल्यांकन करती है। मान से तात्पर्य है कि प्रत्येक घटक के लिए एक डिस्प्ले कितने बिट्स का उपयोग करता है, जो परिभाषित करता है कि यह कितने अलग-अलग रंग दिखा सकता है। आधुनिक उपकरण आमतौर पर 24-बिट डिस्प्ले का उपयोग करते हैं जो प्रति रंग घटक आठ बिट का उपयोग करता है। यह एक पूर्णांक मान भी लेता है, जहाँ एक रंगहीन उपकरण शून्य होता है।
रंग सुविधा का भी उपयोग करता है न्यूनतम रंग तथा अधिकतम रंग पर्वतमाला।
रंग सुविधा का उपयोग करना
/* सीएसएस */
@मीडिया (न्यूनतम रंग: 7) {
पी{
सीमा: 2px ठोस हरा;
}
}
एचटीएमएल
लोरेम इप्सम डोलर सिट एमेट कंसेक्टेटूर एडिपिसिसिंग एलीट।
सात और उससे अधिक के रंग घटक वाले उपकरण अपने ब्राउज़र में निम्न आउटपुट प्रदर्शित करेंगे:
अब आप अद्वितीय उपयोगकर्ता अनुभव बना सकते हैं
आपकी वेबसाइट या एप्लिकेशन पर आने वाले प्रत्येक उपयोगकर्ता के अनुभव को बढ़ाने के लिए आपको इन उन्नत मीडिया प्रश्नों का उपयोग करने में सक्षम होना चाहिए। मोबाइल उपयोगकर्ताओं और डेस्कटॉप उपयोगकर्ताओं को अपनी साइट पर समान रूप से सकारात्मक अनुभव देना महत्वपूर्ण है।
मीडिया क्वेश्चन केवल CSS टूल नहीं हैं जो आपके डेवलपर कौशल को मजबूत कर सकते हैं।
8 आवश्यक सीएसएस टिप्स और ट्रिक्स हर डेवलपर को पता होना चाहिए
आगे पढ़िए
संबंधित विषय
- प्रोग्रामिंग
- सीएसएस
- वेब डिजाइन
लेखक के बारे में
कदीशा कीन एक पूर्ण-स्टैक सॉफ़्टवेयर डेवलपर और तकनीकी/प्रौद्योगिकी लेखक हैं। उसके पास कुछ सबसे जटिल तकनीकी अवधारणाओं को सरल बनाने की विशिष्ट क्षमता है; उत्पादन सामग्री जिसे किसी भी तकनीकी नौसिखिए द्वारा आसानी से समझा जा सकता है। उसे लिखने, दिलचस्प सॉफ्टवेयर विकसित करने और दुनिया की यात्रा (वृत्तचित्रों के माध्यम से) करने का शौक है।
हमारे न्यूज़लेटर की सदस्यता लें
तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!
सब्सक्राइब करने के लिए यहां क्लिक करें
