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

CSS आकार इकाइयाँ क्यों मायने रखते हैं

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

लेकिन यहाँ बात है: विभिन्न प्रकार की आकार इकाइयाँ हैं, और उनमें से सभी समान नहीं हैं। कुछ तय हो जाते हैं, जबकि अन्य स्क्रीन या आसपास की सामग्री के आधार पर बदलते हैं। चलो इन इकाइयों में गोता लगाएँ ताकि आप नौकरी के लिए सही चुन सकें।

निरपेक्ष बनाम सापेक्ष इकाइयाँ: क्या अंतर है?

]

निरपेक्ष इकाइयां बहुत सीधी हैं। वे निश्चित हैं और नहीं बदलते हैं, कोई फर्क नहीं पड़ता कि स्क्रीन का आकार। एक शासक की तरह उनके बारे में सोचें जो कभी नहीं बदलता है।

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

निरपेक्ष इकाइयाँ: पुराने स्कूल का रास्ता
• ] वे स्क्रीन आकार, लेआउट या किसी अन्य कारक के बारे में परवाह नहीं करते हैं। जब आप निरपेक्ष इकाइयों का उपयोग करते हैं, तो आप तत्वों के आकार में लॉकिंग करते हैं। जबकि यह आपको कुल नियंत्रण देता है, इसका मतलब यह भी है कि आपका डिज़ाइन अलग -अलग स्क्रीन के लिए अच्छी तरह से अनुकूलित नहीं हो सकता है।
यहाँ कुछ सबसे आम निरपेक्ष इकाइयाँ हैं:

] एक पिक्सेल स्क्रीन पर एक डॉट से मेल खाती है।

]

] जबकि निरपेक्ष इकाइयां चीजों को तेज दिखाने में मदद कर सकती हैं, वे आधुनिक उत्तरदायी वेबसाइटों के लिए बहुत अधिक लचीलेपन की पेशकश नहीं करते हैं। और जहां सापेक्ष इकाइयां अंदर कदम रखते हैं।

सापेक्ष इकाइयाँ: लचीलेपन की वास्तविक शक्ति
• सापेक्ष इकाइयाँ हैं जहां जादू होता है। ये इकाइयां आसपास की सामग्री या स्क्रीन आकार के आधार पर स्केल करती हैं, जिससे उन्हें ऐसे डिज़ाइन बनाने के लिए एकदम सही बनाया जाता है जो हर जगह बहुत अच्छी लगती हैं, छोटी स्क्रीन से लेकर विशाल मॉनिटर तक। आइए प्रमुख सापेक्ष इकाइयों पर एक नज़र डालें:
• प्रतिशत (%) प्रतिशत इकाई लचीलेपन के बारे में है। यदि आप किसी तत्व की चौड़ाई को 50%तक सेट करते हैं, तो यह उसके मूल कंटेनर के आधे आकार को ले जाएगा, चाहे वह कंटेनर कितना भी बड़ा या छोटा क्यों न हो। यह उत्तरदायी लेआउट के लिए आदर्श है, जहां आप चाहते हैं कि उपलब्ध स्थान के आधार पर चीजें समायोजित करें।
• । कंटेनर { चौड़ाई: 100%; / * मूल कंटेनर का 100% लेता है */ }
EM और REM: टेक्स्ट के साथ स्केलिंग

उन्हें मूल तत्व के फ़ॉन्ट आकार के सापेक्ष है।
] ये इकाइयाँ स्केलेबल टाइपोग्राफी या रिक्ति बनाने के लिए एकदम सही हैं जो आपकी वेबसाइट पर लगातार महसूस करती है, खासकर जब उपयोगकर्ता अपने ब्राउज़र के डिफ़ॉल्ट फ़ॉन्ट आकार को बदलते हैं।

html { फ़ॉन्ट-आकार: 16px; / * सेट बेस फ़ॉन्ट आकार */ } h1 { फ़ॉन्ट-आकार: 2rem; / * 32px */ } पी { फ़ॉन्ट-आकार: 1.5EM; / * 24px, मूल तत्व के फ़ॉन्ट आकार के आधार पर *// }

व्यूपोर्ट यूनिट्स (VW, VH)

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

.container {
  width: 100%; /* Takes up 100% of the parent container */
}

]

] ये विशेष रूप से आधुनिक, द्रव लेआउट के लिए उपयोगी हैं।

।नायक { चौड़ाई: 100VW; / * व्यूपोर्ट की पूरी चौड़ाई */ ऊंचाई: 100VH; / * व्यूपोर्ट की पूर्ण ऊंचाई */ }
आपको किस इकाई का उपयोग करना चाहिए?
तो, आप कैसे तय करते हैं कि आपके डिजाइन के लिए किस इकाई का उपयोग करना है? यहाँ कुछ संकेत हैं:

html {
  font-size: 16px; /* Set base font size */
}

h1 {
  font-size: 2rem; /* 32px */
}

p {
  font-size: 1.5em; /* 24px, based on the parent element's font size */
}

निश्चित तत्वों के लिए: जब आपको पूर्ण नियंत्रण की आवश्यकता हो तो पीएक्स का उपयोग करें। आइकन, बॉर्डर और अन्य छोटे तत्वों जैसी चीजें जिन्हें सटीक आयामों की आवश्यकता होती है, वे पिक्सेल के लिए एकदम सही हैं।

द्रव लेआउट के लिए: जब आप अपने कंटेनर के आकार के आधार पर तत्वों को अनुकूलित करना चाहते हैं तो % का उपयोग करें। यह ग्रिड, कॉलम, या अनुभागों के लिए बहुत अच्छा है जो स्क्रीन के आकार के साथ ऊपर या नीचे होना चाहिए।

टाइपोग्राफी के लिए: अपनी साइट पर स्थिरता के लिए REM का उपयोग करें, और मूल कंटेनर के फ़ॉन्ट आकार के आधार पर स्थानीय समायोजन के लिए EM।

]
• बचने के लिए सामान्य गलतियाँ
यहां तक ​​कि अनुभवी डिजाइनर कभी -कभी सीएसएस आकार इकाइयों का उपयोग करते समय गलतियाँ करते हैं। यहाँ के लिए क्या देखना है:
• पिक्सेल पर बहुत अधिक भरोसा करना: जबकि पीएक्स का उपयोग करना आसान है, यह उत्तरदायी डिजाइन के लिए बहुत मदद नहीं करता है। ] अन्यथा, आपकी टाइपोग्राफी असंगत लग सकती है।
] अपनी इकाई उपयोग को सुसंगत रखें।

.container {
  width: 100%; /* Takes up 100% of the parent container */
}

रैपिंग अप: सीएसएस आकार इकाइयाँ

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

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

तो, वहाँ से बाहर जाओ, इन इकाइयों के साथ प्रयोग करें, और अपने डिजाइनों को पहले से कहीं अधिक तरल और उत्तरदायी बनाएं!
• हैप्पी डिजाइनिंग!