CSS3 के मीडिया प्रश्नों का उपयोग कर उत्तरदायी डिजाइन

CSS3 के मीडिया प्रश्नों का उपयोग कर उत्तरदायी डिजाइन

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

“उत्तरदायी डिजाइन” दो अन्य शब्द थे जो लगातार सामने आ रहे थे। वेब का मोबाइल अवलोकन एक बढ़ता हुआ चलन है और हमने डिवाइस एग्नॉस्टिक डिज़ाइन प्रदान करके इसे गले लगाने का निर्णय लिया। आम लोगों के संदर्भ में इसका अर्थ यह है कि चाहे आप अपने डेस्कटॉप, अपने iPad या अपने स्मार्टफोन पर FaultPress की जांच कर रहे हों, सामग्री आपको एक सहज और उचित तरीके से वितरित की जाती है।

CSS3 के मीडिया प्रश्नों का उपयोग कर उत्तरदायी डिजाइन
iPhone और iPad के लिए FaultPress प्रदर्शित करता है।

तो उसे कैसे किया जाता है? CSS3 के मीडिया प्रश्नों के थोड़े स्पिंकलिंग के साथ। मीडिया प्रश्न हाल ही में बहुत अधिक ध्यान आकर्षित कर रहे हैं, इतना अधिक कि हम पहले से ही उत्तरदायी वेब डिज़ाइन दीर्घाओं को पॉप अप होते देखना शुरू कर रहे हैं।

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

  • 320 x 480 – स्मार्टफोन
  • 480 x 320 – लैंडस्केप ओरिएंटेशन में स्मार्टफ़ोन
  • 768 x 1024 – आईपैड
  • 1024 x 768 – लैंडस्केप ओरिएंटेशन / नेटबुक में iPad
  • कुछ भी बड़ा – डेस्कटॉप/लैपटॉप कंप्यूटर

नंबर पिक्सेल के प्रतिनिधि हैं।

इन चौड़ाई का उपयोग थ्रेसहोल्ड के रूप में करते हुए हमने इनमें से प्रत्येक डिवाइस के लिए अनुकूलित डिज़ाइन प्रदान किए।

कैसे? जैसा कि मैंने पहले उल्लेख किया है कि मीडिया प्रश्नों को पेज हेडर में शामिल किया जा सकता है (यदि आप अपनी स्टाइलशीट को प्रति डिवाइस अलग करना चाहते हैं) या सीधे मुख्य स्टाइलशीट में। क्योंकि FaultPress एक बहुत बड़ी थीम है, हमने प्रत्येक डिवाइस के लिए एक अलग स्टाइलशीट बनाने का विकल्प चुना। कोड ही बहुत सीधा है:

 

	 

	 

	 

	

यदि आप पेज हेडर के विपरीत स्टाइलशीट के भीतर मीडिया क्वेरीज़ रखना चाहते हैं, तो आपको निम्नलिखित सिंटैक्स का उपयोग करना चाहिए;

@media only screen and (min-width: 768px) and (max-width: 991px) {
    Styles go here
}

मीडिया क्वेरी सिंटैक्स के बारे में यहाँ और पढ़ें।

पहली स्टाइलशीट डिफ़ॉल्ट है और सभी मुख्य शैलियाँ यहाँ रखी गई हैं। यह 1024 × 768 और 1280 × 1024 के बीच के संकल्पों के लिए लक्षित है। वर्तमान में दो सबसे लोकप्रिय संकल्प। दूसरा आधुनिक वाइडस्क्रीन डिस्प्ले के लिए है और उन उपयोगकर्ताओं को डिलीवर किया जाएगा जिनकी स्क्रीन रिज़ॉल्यूशन चौड़ाई 1212px से अधिक है। तीसरा टैबलेट और व्यूपोर्ट के लिए है जिसकी रिज़ॉल्यूशन चौड़ाई 768px और 991px के बीच है।

उपकरणों की एक पर्याप्त श्रेणी के लिए तैयार की गई विशिष्ट स्टाइलशीट के साथ, अगला काम यह सुनिश्चित करना है कि आपके मुख्य रैपिंग तत्व की चौड़ाई उन उपकरणों के लिए उपयुक्त है। ऐसा करने का सबसे आसान और सबसे सिमेंटिक तरीका बॉडी टैग का उपयोग करना है। एक त्वरित उदाहरण के रूप में (मैं आपको अंतहीन कोड के साथ बोर नहीं करना चाहता), आपके हैंडहेल्ड-पोर्ट्रेट.सीएसएस फ़ाइल के अंदर आप कुछ इस तरह से सम्मिलित करेंगे:

body {
    width:300px; /* Smartphone resolution 320 x 480 */
    margin: 0 auto;
}

स्मार्टफोन के हिसाब से आप आगे बढ़ सकते हैं और ऊपर उल्लिखित संकल्पों के आधार पर विभिन्न उपकरणों के लिए नियम बना सकते हैं।

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

सीटीए-बैनर-10-उत्पाद-पृष्ठ-v2_2x

CSS3 के मीडिया प्रश्नों का उपयोग कर उत्तरदायी डिजाइन CSS3 के मीडिया प्रश्नों का उपयोग कर उत्तरदायी डिजाइन

प्रातिक्रिया दे

आपका ईमेल पता प्रकाशित नहीं किया जाएगा. आवश्यक फ़ील्ड चिह्नित हैं *