सीएसएस में तत्वों को स्टाइल करते समय, आपके पास चुनने के लिए इकाइयों की दो श्रेणियां होती हैं: पूर्ण इकाइयां और सापेक्ष इकाइयां। यहां उनमें से प्रत्येक का विवरण दिया गया है और वे कैसे भिन्न हैं:

1. निरपेक्ष इकाइयाँ

पूर्ण इकाइयां माप की निश्चित इकाइयां हैं। वे अन्य तत्वों या स्क्रीन आकारों से प्रभावित नहीं होते हैं, जिसका अर्थ है कि उनका आकार स्थिर रहता है, भले ही उनका उपयोग किसी भी संदर्भ में किया गया हो।

सामान्य निरपेक्ष इकाइयाँ:

• px (पिक्सेल): पिक्सेल स्क्रीन पर एक छोटा वर्ग होता है। यह निश्चित लेआउट के लिए सबसे अधिक उपयोग की जाने वाली इकाई है।

  • उदाहरण:

  h1 {
    font-size: 24px;
  }
  

• pt (अंक): आमतौर पर प्रिंट मीडिया में उपयोग किया जाता है, 1pt एक इंच के 1/72 के बराबर होता है।

• सेमी (सेंटीमीटर) और इंच (इंच): वेब डिज़ाइन में शायद ही कभी उपयोग किया जाता है, ये इकाइयां भौतिक आयामों पर आधारित हैं।

निरपेक्ष इकाइयों के लाभ:

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

नुकसान:

• लचीलेपन की कमी: निरपेक्ष इकाइयां विभिन्न स्क्रीन आकारों या ज़ूम सेटिंग्स के लिए अच्छी तरह से अनुकूलित नहीं होती हैं, जिससे वे कम प्रतिक्रियाशील हो जाती हैं।

2. सापेक्ष इकाइयाँ

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

सामान्य सापेक्ष इकाइयाँ:

• em: जिस तत्व पर इसका उपयोग किया जाता है उसके फ़ॉन्ट आकार से संबंधित। यदि मूल तत्व का फ़ॉन्ट आकार 16px है, तो 1em 16px के बराबर है। यदि मूल तत्व का आकार बदलता है, तो उसका आकार भी बदल जाएगा।

  • उदाहरण:

  p {
    font-size: 1.5em; /* 1.5 times the font size of the parent */
  }
  

• rem (root em): root element (आमतौर पर element) के फ़ॉन्ट आकार से संबंधित। यह इसे उनकी तुलना में अधिक पूर्वानुमानित बनाता है।

डिफ़ॉल्ट रूप से, ब्राउज़र आमतौर पर रूट फ़ॉन्ट आकार 16px पर सेट करते हैं, जब तक कि अन्यथा निर्दिष्ट न किया गया हो। यदि आप तत्व के लिए एक कस्टम फ़ॉन्ट आकार परिभाषित करते हैं, तो सभी रेम मानों की गणना उस नए आकार के आधार पर की जाएगी।

• उदाहरण:
  

  p {
    font-size: 2rem; /* 2 times the root font size */
  }
  

  • % (प्रतिशत): मूल तत्व के आकार से संबंधित। उदाहरण के लिए, width: 50% तत्व को उसके मूल कंटेनर की चौड़ाई 50% बनाता है।

• उदाहरण:
  

  div {
    width: 75%; /* 75% of the parent's width */
  }
  

  • vw (व्यूपोर्ट चौड़ाई) और vh (व्यूपोर्ट ऊंचाई): ये इकाइयां ब्राउज़र के व्यूपोर्ट से संबंधित हैं। 1vw व्यूपोर्ट की चौड़ाई का 1% है, और 1vh व्यूपोर्ट की ऊंचाई का 1% है।

• उदाहरण:
  

  div {
    width: 50vw; /* 50% of the viewport's width */
  }
  

सापेक्ष इकाइयों के लाभ:

• उत्तरदायी डिज़ाइन: सापेक्ष इकाइयां स्क्रीन आकार, फ़ॉन्ट आकार या कंटेनर आयामों के आधार पर स्वचालित रूप से स्केल करती हैं, जिससे आपका डिज़ाइन अधिक लचीला हो जाता है।
• रखरखाव में आसान: मूल तत्व का फ़ॉन्ट आकार बदलना (रेम का उपयोग करके) आपके संपूर्ण डिज़ाइन को स्केल कर सकता है।

नुकसान:

• नियंत्रित करना कठिन हो सकता है: वंशानुक्रम की अच्छी समझ के बिना और तत्वों के माध्यम से आकार कैसे बढ़ते हैं, सापेक्ष इकाइयां कभी-कभी अप्रत्याशित परिणाम दे सकती हैं।

निरपेक्ष बनाम सापेक्ष इकाइयों का उपयोग कब करें

• पूर्ण इकाइयां (जैसे पीएक्स) तब सर्वोत्तम होती हैं जब आपको सटीक, निश्चित माप की आवश्यकता होती है। इनका उपयोग तब करें जब आप चाहते हैं कि कोई चीज़ हर जगह एक ही आकार की हो (उदाहरण के लिए, एक छोटा लोगो या आइकन)।
• सापेक्ष इकाइयाँ (जैसे em, rem, vw, और %) प्रतिक्रियाशील डिज़ाइन के लिए आदर्श हैं। वे स्क्रीन आकार या मूल तत्व के आधार पर तत्वों को स्केल करने और अनुकूलित करने की अनुमति देते हैं, जिससे आपका डिज़ाइन अधिक लचीला हो जाता है।

उदाहरण: व्यवहार में निरपेक्ष बनाम सापेक्ष इकाइयाँ

This is 24px text
This is 1.5rem text (24px based on root size)

इस उदाहरण में:

• absolute फ़ॉन्ट आकार (24px) हमेशा वही रहेगा।
• सापेक्ष फ़ॉन्ट आकार (1.5rem) रूट फ़ॉन्ट आकार (16px) के आधार पर समायोजित होगा, जिसके परिणामस्वरूप 24px होगा।

निष्कर्ष:

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