👍 🗽 💻 जानें 5 मिनटों में उत्तरदायी वेब डिज़ाइन ⛈️ 🛃 🚫

नमस्कार, हेब्र! मैं आपके द्वारा " प्रति मिनट 5 मिनट में उत्तरदायी वेब डिज़ाइन सीखें" लेख का अनुवाद प्रस्तुत करता हूं।

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

सापेक्ष सीएसएस इकाइयाँ
मीडिया के सवाल
flexbox
उत्तरदायी टाइपोग्राफी

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

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

सबसे आम रिश्तेदार इकाइयाँ:

%
एम
रेम
VW
VH

इस खंड में, हम माप की एक इकाई के रूप में प्रतिशत% के साथ शुरू करते हैं, और फिर अंतिम खंड में हम इकाई रेम पर विचार करते हैं।

मान लें कि हमारे पास नीचे की तरह एक बहुत ही सरल साइट है:

इसका HTML इस प्रकार है:

<body> <h1>Welcome to my website</h1> <image src="path/to/img.png" class="myImg"> </body>

जैसा कि आप नीचे GIF से देख सकते हैं, हमारी डिफ़ॉल्ट छवि की एक निश्चित चौड़ाई होगी:

छवि विशेष रूप से उत्तरदायी नहीं है, इसलिए चलो चौड़ाई को 70% तक बदल दें। हम बस निम्नलिखित लिखते हैं:

 .myImg { width: 70%; }

यह छवि की चौड़ाई को मूल तत्व की चौड़ाई के 70% तक सेट करता है जो टैग में लिखा गया है। चूंकि टैग स्क्रीन की पूरी चौड़ाई को कवर करता है, इसलिए छवि हमेशा ब्राउज़र विंडो के 70% ही होगी।

यहाँ परिणाम है:

उत्तरदायी छवि बनाना इतना आसान है।

साइट के मोबाइल संस्करण को बेहतर बनाने के लिए मीडिया क्वेरी का उपयोग करना

हमें अपने उत्तरदायी लेआउट के साथ एक समस्या है - यह बहुत छोटे स्क्रीन पर अजीब लगता है। मोबाइल फोन पर देखने पर 70% चौड़ाई के बराबर घट जाना चाहिए। बस अपने लिए एक नज़र रखना:

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

यहां बताया गया है कि हम CSS में एक मीडिया क्वेरी कैसे बनाते हैं:

 @media (max-width: 768px) { .myImage { width: 100% } }

यह सीएसएस ब्लॉक केवल तभी लागू होगा जब स्क्रीन की चौड़ाई 768 पिक्सेल से कम हो।

यहाँ परिणाम है:

जैसा कि आप देख सकते हैं, पृष्ठ में एक विराम बिंदु है जहां छवि व्यापक हो जाती है: जब ब्राउज़र विंडो 768px चौड़ी होती है, तो छवि की चौड़ाई 70% से 100% तक बदल जाती है।

नैविगेशन मेनू फ्लेक्सबॉक्स का उपयोग करना

इसके बाद फ्लेक्सबॉक्स आता है। आप पहले Flexbox से परिचित हुए बिना जवाबदेही को नहीं समझ सकते। जब फ्लेक्सबॉक्स को कई साल पहले पेश किया गया था, तो इसने अपने उत्तरदायी डिजाइन को बदल दिया, क्योंकि यह मॉड्यूल अक्ष के साथ तत्वों को स्थिति के लिए बहुत आसान बनाता है।

फ्लेक्सबॉक्स का उपयोग करने के लिए, हम हेडर के ऊपर एक नेविगेशन मेनू जोड़कर हमारी साइट को थोड़ा और अधिक जटिल बना देंगे। इसके लिए यहां HTML दिया गया है:

 <nav> <a href="#">Home</a> <a href="#">About me</a> <a href="#">Contact</a> </nav>

डिफ़ॉल्ट रूप से, यह कुछ इस तरह दिखेगा:

हमारे मेनू आइटम बाईं ओर स्थानांतरित कर दिए गए हैं, लेकिन यह वह नहीं है जो हमें चाहिए। हम चाहते हैं कि उन्हें पृष्ठ की चौड़ाई में समान रूप से संरेखित किया जाए।

ऐसा करने के लिए, हम कंटेनर को फ्लेक्सबॉक्स में बदल देते हैं, और फिर औचित्य-सामग्री जादू की संपत्ति लागू करते हैं।

 nav { display: flex; justify-content: space-around; }

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

यहाँ है कि यह कैसा दिखता है। और, जैसा कि आप देख सकते हैं, साइट अच्छी तरह से तराजू:

उत्तरदायी टाइपोग्राफी: रेम

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

ऐसा करने का एक तरीका मीडिया क्वेरी में फ़ॉन्ट आकार को कम करना है, उदाहरण के लिए, निम्नानुसार है:

 @media (max-width: 768px) { nav { font-size: 14px; } h1 { font-size: 28px; } }

यह सही से दूर निकला। एक आवेदन में कई नियंत्रण बिंदु और कई तत्व (एच 2, एच 3, पैराग्राफ, और इतने पर) हो सकते हैं। नतीजतन, हमें सभी तत्वों को सभी अलग-अलग ब्रेकप्वाइंट में ट्रैक करना होगा। यह अनुमान लगाना आसान है कि यह कुछ भ्रम पैदा करेगा।

हालांकि, सबसे अधिक संभावना है, वे अलग-अलग नियंत्रण बिंदुओं पर कमोबेश एक-दूसरे से संबंधित होंगे। उदाहरण के लिए, h1 हमेशा पैराग्राफ से अधिक होगा।

क्या होगा अगर एक तत्व को स्थापित करने का एक तरीका था और फिर बाकी फ़ॉन्ट आकार उस तत्व के सापेक्ष बड़े पैमाने पर बनाएं?

रेम दर्ज करें!

रेम मूल रूप से आपके तत्व के लिए निर्धारित फ़ॉन्ट आकार मान का अर्थ है। निम्नलिखित के प्रकार:

 html { font-size: 14px; }</source ,     rem  14px.  ,             rem. : <source lang="xml">h1 { font-size: 2rem; } nav { font-size: 1rem; }

और फिर हम केवल अपने मीडिया अनुरोध के अंदर टैग के लिए फ़ॉन्ट आकार मान को बदलते हैं। यह हमारे h1 और नौसेना तत्वों के लिए फ़ॉन्ट आकार प्रदान करेगा।

यहां बताया गया है कि हम मीडिया क्वेरी में रेम वैल्यू कैसे बदलते हैं:

 @media (max-width: 768px) { html { font-size: 14px } }

और ऐसे ही, हमारे सभी फॉन्ट साइज़ के लिए हमारे पास एक ब्रेक पॉइंट है। ध्यान दें कि जब पृष्ठ 768-पिक्सेल का निशान पार करता है तो फ़ॉन्ट का आकार कैसे बदलता है:

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

अच्छा कोडिंग!

जानें 5 मिनटों में उत्तरदायी वेब डिज़ाइन

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

साइट के मोबाइल संस्करण को बेहतर बनाने के लिए मीडिया क्वेरी का उपयोग करना

नैविगेशन मेनू फ्लेक्सबॉक्स का उपयोग करना

उत्तरदायी टाइपोग्राफी: रेम

More articles: