CSS इकाइयाँ निरपेक्ष (स्थिर) और सापेक्ष (कुछ के साथ स्केल) में विभाजित होती हैं। सही चुनाव प्रतिक्रियाशील और सुलभ लेआउट के लिए महत्वपूर्ण है।
.x { width: 100px; } /* px — fixed pixels; predictable, doesn't scale */
ऐसी चीजों के लिए का उपयोग करें जिन्हें स्केल नहीं होना चाहिए (बॉर्डर, छोटे निश्चित विवरण)।
pxfont-size: 1.5rem; /* rem — relative to the ROOT font-size (html). Consistent. */
font-size: 1.2em; /* em — relative to the PARENT's font-size. Compounds! */
width: 50%; /* % — relative to the parent's size */
width: 50vw; /* vw — 50% of viewport WIDTH */
height: 100vh; /* vh — 100% of viewport HEIGHT */
html { font-size: 16px; }
.parent { font-size: 20px; }
.parent .child { font-size: 2em; } /* 2 × 20 = 40px (relative to parent) */
.parent .other { font-size: 2rem; } /* 2 × 16 = 32px (relative to root) */
em नेस्टिंग के माध्यम से यौगिक (एक बच्चे का बच्चा गुणा करता है), जो अप्रत्याशित रूप से बढ़ सकता है। rem हमेशा रूट को संदर्भित करता है, इसलिए यह अनुमानित है — फ़ॉन्ट आकार और间रिक्ति के लिए जाने का विकल्प। em का उपयोग तब करें जब आप चाहते हैं कि आकार स्थानीय फ़ॉन्ट के सापेक्ष हो (जैसे बटन पर पैडिंग जो इसके पाठ के साथ स्केल हो)।
font-size: 16px; /* ❌ ignores the user's browser font-size preference */
font-size: 1rem; /* ✅ scales when the user increases their default size */
टाइप के लिए rem का उपयोग करना उन उपयोगकर्ताओं का सम्मान करता है जिन्होंने बड़ा डिफ़ॉल्ट फ़ॉन्ट सेट किया है — एक वास्तविक सुलभता जीत जो px को तोड़ता है।
सही इकाई लेआउट को प्रतिक्रियाशील और सुलभ बनाती है: rem टाइप/स्पेसिंग के लिए (अनुमानित + उपयोगकर्ता सेटिंग्स का सम्मान करता है), तरल लेआउट के लिए %/vw/vh, निश्चित विवरण के लिए px, और स्थानीय-सापेक्ष आकार के लिए em।
नई viewport इकाइयाँ (dvh, svh) मोबाइल एड्रेस-बार ऊंचाई समस्याओं को भी ठीक करती हैं।