रिस्पॉन्सिव वेब डिज़ाइन क्या है

• मई 14, 2024

एक उत्तरदायी वेब डिज़ाइन की तीन मुख्य विशेषताएं हैं, जो द्रव लेआउट, आकार बदलने योग्य चित्र और मीडिया क्वेरी हैं। मीडिया के प्रश्न वास्तव में वेब डिज़ाइन के लिए नए नहीं हैं। CSS2.1 में मीडिया प्रकारों के रूप में शुरुआत करते हुए, हम वेब और प्रिंट दोनों के लिए स्टाइलशीट डिज़ाइन कर सकते हैं, कुछ हद तक यह सुनिश्चित करते हुए कि वेबपेज स्क्रीन पर और प्रिंट होने पर समान दिखाई देगा। यह CSS3 में मीडिया के प्रश्नों में आगे बढ़ गया। यह क्वेरी मीडिया डिवाइस की चौड़ाई (अधिकतम-डिवाइस-चौड़ाई) की जांच करता है और इसे 480px या 768px जैसे एक निर्धारित मूल्य के खिलाफ परीक्षण करता है। इस क्वेरी के जवाब में, हम द्रव लेआउट को बदलने और स्क्रीन के लिए छवियों का आकार बदलने के लिए CSS शैलियों का उपयोग करते हैं।

आप आसानी से परीक्षण कर सकते हैं यदि वेबसाइट में एक उत्तरदायी डिज़ाइन है। अपने कंप्यूटर स्क्रीन की पूरी चौड़ाई पर ब्राउज़र से शुरू करें। फिर ब्राउज़र विंडो की चौड़ाई को कम करने के लिए ब्राउज़र के दाहिने किनारे को बाईं ओर खींचें। आपको यह देखना चाहिए कि चित्र छोटे हो गए हैं और लेआउट फ्लोटिंग डिव लेगा जो साइड-बाय-साइड हैं और उन्हें लंबवत रूप से स्टैक करें। उदाहरण के लिए, यदि हमारे पास पूर्ण स्क्रीन पर एक गैलरी पृष्ठ पर प्रति पंक्ति में छह छवियां (छह divs) हैं, जैसा कि हम स्क्रीन की चौड़ाई को कम करते हैं, तो पंक्ति में छवियों की संख्या उत्तरोत्तर कम और खड़ी हो जाती है, आवश्यकतानुसार। एक बार एक निश्चित मात्रा में चौड़ाई कम हो जाने के बाद, चित्र स्वयं छोटे आकार बदलने लगेंगे। यदि आप बारीकी से देखते हैं, तो आप यह भी देखेंगे कि कुछ डिज़ाइन तत्व, जैसे कि नेविगेशन लिंक, एक आइकन पर कम हो सकते हैं या यहां तक ​​कि गायब हो सकते हैं। यह CSS स्टाइलशीट द्वारा भी नियंत्रित किया जाता है।

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

वीडियो निर्देश: Bootstrap Tutorial in Hindi | Bootstrap Container in Hindi (मई 2024).