em, rem, vh and vw units + Responsive design Explained Tutorials #29
इस ट्यूटोरियल में, हम रिस्पॉन्सिव डिज़ाइन और CSS यूनिट्स पर चर्चा करेंगे।
उत्तरदायी डिजाइन क्या है?
क्या आपने कभी गौर किया है कि आजकल वेबसाइटें आपके डिवाइस (स्मार्टफोन, टैबलेट या डेस्कटॉप कंप्यूटर) के रिजॉल्यूशन के अनुसार खुद को एडजस्ट कर लेती हैं? क्या यह आश्चर्यजनक नहीं है कि कोई वेबसाइट उपयोगकर्ता की स्क्रीन के आकार के अनुसार अपनी ऊंचाई और चौड़ाई स्वचालित रूप से बदल रही है? उत्तरदायी डिजाइन के कारण यह संभव है। आइए उत्तरदायी डिजाइन में गहराई से गोता लगाएँ।
उत्तरदायी डिज़ाइन एक वेब डेवलपर के लिए वेबसाइट को सभी उपकरणों और प्रस्तावों के अनुकूल बनाने का एक तरीका है।
वेब डेवलपर के लिए अलग से समर्थन करने के लिए अंतहीन नए संकल्प और डिवाइस चुनौतीपूर्ण हैं; इसलिए, एक वेबसाइट विकसित करने के लिए उत्तरदायी डिजाइन सबसे अच्छा तरीका है जो स्क्रीन आकार के अनुसार खुद को समायोजित कर सकता है।
उत्तरदायी डिजाइन एक आवश्यकता है और अब विलासिता नहीं है!
उत्तरदायी डिजाइन प्राप्त करने के विभिन्न तरीके:
पिक्सल पर रेम/वीएच/वीडब्ल्यू इकाइयों का उपयोग करके।
अधिकतम-चौड़ाई/अधिकतम-ऊंचाई का उपयोग करके।
CSS मीडिया क्वेरीज़ का उपयोग करना।
व्यूपोर्ट की स्थापना।
यह ट्यूटोरियल एक उत्तरदायी वेबसाइट बनाने के लिए CSS आकार की इकाइयों के उपयोग को कवर करेगा। हम आगे के ट्यूटोरियल्स में रिस्पॉन्सिव डिज़ाइन के अन्य तरीके देखेंगे। तो, चलिए CSS आकार इकाइयों पर अपनी चर्चा शुरू करते हैं। सबसे पहले, हम तीन शीर्षक बनाने के लिए नीचे दिए गए CSS का उपयोग कर रहे हैं:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Size Units</title>
<style>
h1{
text-align: center;
font-size: 10px;
}
.container{
font-size: 10px;
}
</style>
</head>
<body>
<div class="container">
<h1 id="first">This is first heading</h1>
<h1 id="second">This is second heading </h1>
<h1 id="third">This is third heading</h1>
</div>
</body>
</html>
आउटपुट:
यहां, हमने केवल तीन शीर्षक बनाए हैं और उन्हें केंद्र में संरेखित किया है। अब, हम इन शीर्षकों का उपयोग em, rem, vh, और vw की अवधारणा को समझने के लिए करेंगे।
em-
फ़ॉन्ट-आकार मूल तत्व के सापेक्ष विरासत में मिले हैं।
10em का अर्थ मूल तत्व का दस गुना है।
नीचे दिए गए सीएसएस का प्रयोग करें:
<style>
h1{
text-align: center;
font-size: 10px;
}
.container{
font-size: 10px;
}
#first{
font-size: 10em;
}
</style>
आउटपुट:
उपरोक्त छवि में, आप देख सकते हैं कि पहले शीर्षक का फ़ॉन्ट-आकार बदल गया है। पहले फ़ॉन्ट-आकार 10px था क्योंकि <h1> को यह आकार अपने मूल तत्व, यानी कंटेनर से विरासत में मिला था। अब, <h1> का फ़ॉन्ट-आकार 100px में बदल गया है क्योंकि 10 em का अर्थ मूल तत्व का दस गुना है इसलिए 10*10=100px।
rem-
फ़ॉन्ट-आकार मूल तत्व के फ़ॉन्ट-आकार के अनुसार सेट हो जाता है।
सामान्य तौर पर, <html> मूल तत्व है।
रेम में, "r" का अर्थ "रूट" है।
नीचे दिए गए सीएसएस का प्रयोग करें:
<style>
html{
font-size: 7px;
}
h1{
text-align: center;
font-size: 10px;
}
.container{
font-size: 10px;
}
#first{
font-size: 10em;
}
#second{
font-size: 10rem;
}
</style>
उपरोक्त कोड में, हमने <html> को ७px का font-size दिया है। फिर, हमने दूसरे शीर्षक पर 10rem का फ़ॉन्ट-आकार लागू किया है। यहाँ आउटपुट है:
उपरोक्त छवि में, आप देख सकते हैं कि दूसरे शीर्षक का फ़ॉन्ट आकार 7px से 70px में बदल गया है क्योंकि 10rem मूल तत्व के 10 गुना के बराबर है। आप क्रोम ब्राउजर की एलिमेंट फंक्शनलिटी की जांच की मदद से फॉन्ट-साइज को वेरिफाई कर सकते हैं।
vh-
यह व्यूपोर्ट ऊंचाई के लिए खड़ा है।
vh व्यूपोर्ट की ऊंचाई के 1/100 गुना के बराबर है।
उदाहरण: मान लीजिए ब्राउज़र की ऊंचाई 1000px है, इसलिए 1vh बराबर (1/100)*1000= 10px है।
नीचे दिए गए सीएसएस का प्रयोग करें:
<style>
html{
font-size: 7px;
}
h1{
text-align: center;
font-size: 40px;
}
.container{
border: 2px solid red;
height: 100vh;
width: 400px;
}
/* #first{
font-size: 10em;
}
#second{
font-size: 10rem;
} */
</style>
उपरोक्त कोड में, हमने एक बॉर्डर बनाया है और इसे 100vh की ऊंचाई दी है। यहाँ परिणाम हैं:
ऊपर की छवि में, आप देख सकते हैं कि बॉर्डर की ऊंचाई व्यूपोर्ट के 100% में बदल गई है।
vw-
यह व्यूपोर्ट चौड़ाई के लिए खड़ा है।
वीएच के समान, वीडब्ल्यू व्यूपोर्ट की चौड़ाई के 1/100 गुना के बराबर है।
उदाहरण: मान लीजिए ब्राउज़र की चौड़ाई 1000px है, इसलिए 1vw बराबर (1/100)*1000= 10px है।
नीचे दिए गए सीएसएस का प्रयोग करें:
<style>
html{
font-size: 7px;
}
h1{
text-align: center;
font-size: 40px;
}
.container{
border: 2px solid red;
height: 100vh;
width: 100vw;
}
/* #first{
font-size: 10em;
}
#second{
font-size: 10rem;
} */
</style>
उपरोक्त कोड में, हमने सीमा को 100vw की चौड़ाई दी है। यहाँ परिणाम हैं:
ऊपर की छवि में, आप देख सकते हैं कि बॉर्डर की चौड़ाई व्यूपोर्ट के 100% में बदल गई है। यह ट्यूटोरियल यहाँ समाप्त होता है, और मेरा मानना है कि इस ट्यूटोरियल में चर्चा की गई सभी अवधारणाएँ आपके लिए बिल्कुल स्पष्ट हैं।
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Size units</title>
<style>
html{
font-size: 25px;
}
.container{
width:400px;
/* height: 344px; */
height: 100vh;
width: 100vw;
font-size: 10px;
border :2px solid red;
}
h1{
text-align: center;
}
#first{
/* font-size: 3em;
padding: 3em; */
}
#second{
/* font-size: 3rem;
padding: 3rem; */
}
</style>
</head>
<body>
<div class="container">
<h1 id="first">This is first heading</h1>
<h1 id="second">This is second heading</h1>
<h1 id="third">This is third heading</h1>
</div>
</body>
</html>
