CSS units web development का एक मुख्य हिस्सा हैं। इस ब्लॉग में हम absolute और relative CSS units को विस्तार से समझेंगे।
CSS Units Guide: Absolute और Relative CSS Units में क्या फर्क है?
Web development की journey में CSS styling एक बहुत ही महत्वपूर्ण role play करती है। जब हम web page design करते हैं, तो विभिन्न elements का size, spacing और layout define करने के लिए primary keyword यानी CSS units का उपयोग किया जाता है। अगर आप Vivaa Technologies के web development program के student हैं, तो आपके लिए यह समझना बहुत जरूरी है कि किस property के लिए कौन-सी CSS units का उपयोग करना सही रहेगा। इस guide में हम CSS units को बिल्कुल आसान भाषा में समझेंगे।
CSS Units क्या होती हैं?
जब भी हम किसी element को width, height, font-size, या margin जैसी properties देते हैं, तो हमें browser को बताना होता है कि वह value किस measurement में है। यही measurement देने के लिए CSS units का इस्तेमाल किया जाता है। CSS में CSS units को मुख्य रूप से दो भागों में बांटा गया है:
Absolute CSS Units
Relative CSS Units
Absolute CSS Units (निश्चित इकाइयाँ)
Absolute CSS units वे होती हैं जिनका size हमेशा fixed रहता है, चाहे screen का size कोई भी हो। ये print media या fixed layout के लिए उपयोगी होती हैं, लेकिन modern responsive web design में इन absolute CSS units का उपयोग सीमित होता है।
px(Pixels): यह web development में सबसे ज्यादा इस्तेमाल होने वाली absolute CSS units में से एक है। एक pixel screen के एक single dot के बराबर होता है। यह screen resolution पर निर्भर करता है।अन्य units: जैसे
cm(centimeters),mm(millimeters),in(inches), औरpt(points)। इन CSS units का उपयोग आमतौर पर screen design के बजाय print stylesheet में किया जाता है।
Relative CSS Units (सापेक्ष इकाइयाँ)
Modern responsive web design की जान relative CSS units होती हैं। ये CSS units किसी अन्य element के size या screen के viewport के मुकाबले scale होती हैं। Mobile, tablet और desktop सभी devices पर website को perfect दिखाने के लिए इन relative CSS units का उपयोग अनिवार्य है।
1. rem (Root EM)
यह html root element के font-size के मुकाबले calculate होती है। यदि root html का font-size 16px है, तो 1rem हमेशा 16px के बराबर होगा। यह typography और spacing के लिए सबसे best relative CSS units में मानी जाती है, क्योंकि यह accessibility में मदद करती है।
2. em
यह CSS units current element के parent element के font-size पर निर्भर करती है। यदि parent का font-size बदलता है, तो em पर आधारित child element का size भी बदल जाता है। कभी-कभी nested elements में यह थोड़ा complex हो सकता है, इसलिए rem CSS units को ज्यादा प्राथमिकता दी जाती है।
3. Viewport Units (vw और vh)
ये CSS units browser की screen (viewport) के size पर आधारित होती हैं:
1vw: Viewport की कुल width का 1 प्रतिशत होता है।1vh: Viewport की कुल height का 1 प्रतिशत होता है।इन CSS units का उपयोग full-screen hero section या responsive header बनाने के लिए किया जाता है।
4. Percentage (%)
यह CSS units parent element के मुकाबले relative होती है। उदाहरण के लिए, यदि parent की width 500px है और child की width 50% set की गई है, तो child element अपने आप 250px हो जाएगा।
निष्कर्ष (Conclusion)
सही CSS units का चयन करना एक अच्छे full-stack developer की पहचान है। Layouts को responsive और user-friendly बनाने के लिए हमेशा rem और % जैसी CSS units का उपयोग करें। यदि आप web development और coding के concepts को गहराई से सीखना चाहते हैं, तो Vivaa Technologies के courses के साथ अपनी practice जारी रखें। Coding में निरंतरता ही सफलता की कुंजी है!
