एक अन्य कारक जो मोबाइल-फर्स्ट रिस्पॉन्सिव डिज़ाइन पर ध्यान केंद्रित करने की ओर ले जाता है, वह यह है कि अधिकांश लोग अपने मोबाइल उपकरणों के माध्यम से इंटरनेट का उपयोग करते हैं, जो कि 60% है। जबकि केवल 20% लोग ही डेस्कटॉप पर इंटरनेट का इस्तेमाल करते हैं।
यह आलेख मोबाइल-फर्स्ट रिस्पॉन्सिव डिज़ाइन बनाने के निर्देशों को कवर करेगा।
मोबाइल-फर्स्ट रिस्पॉन्सिव डिज़ाइन कैसे सेट करें?
रिस्पॉन्सिव डिज़ाइन, चाहे वह मोबाइल-फर्स्ट रिस्पॉन्सिव हो या बड़ी स्क्रीन के लिए, नीचे दिए गए तरीकों का पालन करके बनाया जा सकता है:
- एक मोबाइल-फर्स्ट रिस्पॉन्सिव डिज़ाइन बनाएं।
- बड़ी स्क्रीन के लिए रिस्पॉन्सिव डिज़ाइन विकसित/बनाने के लिए मीडिया क्वेरी का उपयोग/उपयोग करें।
विधि 1: एक मोबाइल-फर्स्ट रिस्पॉन्सिव डिज़ाइन बनाएं
सबसे पहले, मोबाइल-फर्स्ट डिज़ाइन दृष्टिकोण बनाना शुरू करें। उस उद्देश्य के लिए, नीचे दिए गए चरणबद्ध निर्देशों का पालन करें।
चरण 1: एक HTML संरचना बनाएं
सबसे पहले, एक HTML संरचना बनाएं और ' जोड़ें बूटस्ट्रैप ' में <सिर> अनुभाग। HTML सेक्शन में स्टाइलशीट जोड़ने के बारे में जानने के लिए इस पर क्लिक करें जोड़ना . एक बुनियादी वेबसाइट संरचना बनाने के बाद, जिसमें शामिल है, <कोई नहीं> , <शीर्षलेख> और <पादलेख> जैसा कि नीचे दिया गया है:
< शरीर ><शीर्षलेख>
<कोई नहीं>
< उल >
< वह < ए href = '#' > घर < / ए < / वह >
< वह < ए href = '#' > हमारे बारे में < / ए < / वह >
< वह < ए href = '#' > हमारी सेवाएँ < / ए < / वह >
< वह < ए href = '#' > संपर्क करें < / ए < / वह >
< / उल >
< / नहीं>
< / हेडर>
<मुख्य>
<अनुभाग>
< एच 1 > लिनक्स हिंट में आपका स्वागत है < / एच 1 >
< पी > एक ट्यूटोरियल वेबसाइट. < / पी >
< / अनुभाग>
< / मुख्य>
<पादलेख>
< पी > लिनक्स संकेत कॉपीराइट < / पी >
< / पादलेख>
< / शरीर >
चरण 2: सीएसएस लागू करें
बॉडी अनुभाग में, 'सेट करें फुहारा परिवार ' को ' सान्स सेरिफ़ ”। पैडिंग, मार्जिन और बैकग्राउंड कलर भी सेट करें। उसके बाद हेडर, फ़ूटर और नेविगेशन पर CSS लागू करें:
शरीर {फुहारा परिवार : सान्स सेरिफ़ ;
अंतर : 0 ;
गद्दी : 0 ;
पृष्ठभूमि का रंग : #808080 ;
}
हैडर {
पृष्ठभूमि का रंग : बैंगनी ;
रंग : सफ़ेद ;
गद्दी : 8px ;
}
नौसेना उल {
सूची-शैली-प्रकार : कोई नहीं ;
गद्दी : 0 ;
अंतर : 0 ;
}
उनका जहाज {
अंतर : 4px 0 ;
}
नव उल ली ए {
रंग : सफ़ेद ;
text-decoration : कोई नहीं ;
}
मुख्य {
गद्दी : 18px ;
}
FOOTER {
पृष्ठभूमि का रंग : गुलाबी ;
रंग : सफ़ेद ;
पाठ संरेखित : केंद्र ;
गद्दी : 8px ;
}
जैसा कि देखा जा सकता है, नीचे दिए गए आउटपुट ने पुष्टि की है कि डिज़ाइन मोबाइल-फर्स्ट रिस्पॉन्सिव है:
विधि 2: बड़ी स्क्रीन के लिए प्रतिक्रियाशील डिज़ाइन बनाने के लिए मीडिया क्वेरीज़ का उपयोग करें
उपरोक्त डिज़ाइन टैबलेट और डेस्कटॉप जैसी बड़ी स्क्रीन के लिए भी बनाया जा सकता है। उस उद्देश्य के लिए, उपयोगकर्ताओं को सीएसएस में मीडिया क्वेरी को शामिल करना होगा। टेबलेट के लिए चौड़ाई है ' 786px 'और डेस्कटॉप के लिए है' 1024px गुणा ”।
मीडिया प्रश्नों को लागू करने के लिए, सबसे पहले, ' शामिल करें @मीडिया सीएसएस फ़ाइल में टैग करें। उसके बाद, 'न्यूनतम-चौड़ाई' संपत्ति को 'के रूप में निर्दिष्ट करें' 768px ”। इसका मतलब यह है कि जब भी न्यूनतम स्क्रीन आकार '768px' या उससे ऊपर पूरा हो जाता है, तो निम्नलिखित सीएसएस लागू होगा:
@मीडिया ( न्यूनतम-चौड़ाई : 768px ) {शरीर {
फ़ॉन्ट आकार : 14px ;
}
हैडर {
गद्दी : 18px ;
}
नौसेना उल {
प्रदर्शन : मोड़ना ;
}
उनका जहाज {
अंतर : 0 8px ;
}
मुख्य {
प्रदर्शन : मोड़ना ;
औचित्य-सामग्री : बीच का स्थान ;
संरेखित-आइटम : केंद्र ;
}
FOOTER {
गद्दी : 18px ;
}
}
नीचे दिए गए आउटपुट से पता चलता है कि डिज़ाइन बड़ी स्क्रीन पर भी प्रतिक्रियाशील है:
निष्कर्ष
मोबाइल-फर्स्ट रिस्पॉन्सिव डिज़ाइन सेट करने के लिए, सबसे पहले, एक HTML संरचना बनाएं और व्यूपोर्ट जोड़ें। इसके बाद CSS फाइल को हेड टैग में लिंक करें। फिर, मोबाइल-फर्स्ट रिस्पॉन्सिव डिज़ाइन के आधार पर सीएसएस लागू करें। इसके अलावा, उपयोगकर्ता मोबाइल डिवाइस पर समायोजित करने के लिए सीएसएस मीडिया क्वेरी जोड़ सकते हैं। इस लेख में मोबाइल-फर्स्ट रिस्पॉन्सिव डिज़ाइन स्थापित करने की एक विस्तृत प्रक्रिया प्रदर्शित की गई है।