हर CSS इकाई: निरपेक्ष, फ़ॉन्ट-सापेक्ष, व्यूपोर्ट-सापेक्ष, फ़्लूइड फ़ंक्शन और कोण, समय तथा रेज़ॉल्यूशन की इकाइयाँ — हर इकाई किसके सापेक्ष मापी जाती है और इसे कब चुनना चाहिए।
निरपेक्ष इकाइयाँ (px, pt) संदर्भ चाहे जैसा भी हो, निश्चित आकार रखती हैं; सापेक्ष इकाइयाँ (rem, vw, %) किसी संदर्भ मान के मुकाबले स्केल होती हैं। फ़ॉन्ट आकार के लिए rem को प्राथमिकता दें: यह उपयोगकर्ता की रूट फ़ॉन्ट-साइज़ सेटिंग का सम्मान करता है, इसलिए आपका टाइपोग्राफ़ी उनकी एक्सेसिबिलिटी प्राथमिकता को मानता है। ऐसी फ़्लूइड टाइपोग्राफ़ी के लिए clamp() का उपयोग करें जो व्यूपोर्ट के साथ बढ़ती और घटती है, पर कभी भी न्यूनतम या अधिकतम सीमा को पार नहीं करती।
संदर्भ तालिका · 38 प्रविष्टियाँ
CSS इकाइयाँExplained
38 of 38 rows
निरपेक्ष
1/96 इंच (CSS संदर्भ पिक्सेल)।
फ़िक्स्ड UI साइज़िंग: बॉर्डर, हेयरलाइन, आइकन के आयाम।
border: 1px solid #000;
1/72 इंच (1pt = 1.333px)।
प्रिंट स्टाइलशीट, जहाँ आकार भौतिक कागज़ से मैप होते हैं।
font-size: 12pt;
1 सेंटीमीटर (≈37.8px)।
वास्तविक दुनिया के माप चाहने वाले प्रिंट लेआउट।
margin: 2cm;
1 मिलीमीटर (≈3.78px)।
बारीक प्रिंट माप।
padding: 5mm;
1 इंच (96px = 2.54cm)।
इंच में मापे गए प्रिंट लेआउट।
margin: 1in;
फ़ॉन्ट-सापेक्ष
तत्व का अपना फ़ॉन्ट-साइज़ (पैरेंट से इनहेरिट)।
ऐसा स्पेसिंग जो आसपास के टेक्स्ट के साथ स्केल हो।
padding: 1em;
रूट तत्व का फ़ॉन्ट-साइज़ (html तत्व)।
फ़ॉन्ट आकार: उपयोगकर्ता की रूट फ़ॉन्ट-साइज़ सेटिंग का सम्मान करता है।
font-size: 1.25rem;
मौजूदा फ़ॉन्ट में '0' ग्लिफ़ की अग्र चौड़ाई।
पढ़ने योग्य लाइन लंबाई तय करना (प्रति पंक्ति अक्षर)।
max-width: 70ch;
मौजूदा फ़ॉन्ट की x-height (छोटे अक्षर 'x' की ऊँचाई)।
टाइपफ़ेस से जुड़े वर्टिकल मेट्रिक्स।
line-height: 2ex;
मौजूदा फ़ॉन्ट की cap height (बड़े अक्षर की ऊँचाई)।
कैपिटल अक्षरों पर आधारित वर्टिकल मेट्रिक्स, ex से संकरे।
padding-top: 0.5cap;
मौजूदा फ़ॉन्ट में '水' (पानी) आइडियोग्राफ़ की अग्र चौड़ाई।
ऐसी साइज़िंग जो एक CJK कैरेक्टर सेल को फ़ॉलो करे।
width: 4ic;
तत्व का अपना कंप्यूटेड line-height।
तत्वों को पूरी टेक्स्ट लाइनों में मापना।
height: 3lh;
रूट तत्व का line-height।
दस्तावेज़ की बेस लाइन ऊँचाई के गुणजों में स्पेसिंग।
margin-block: 2rlh;
व्यूपोर्ट-सापेक्ष
उसी प्रॉपर्टी का पैरेंट का मान।
कंटेनिंग तत्व के अनुसार मापे गए फ़्लूइड लेआउट।
width: 50%;
व्यूपोर्ट चौड़ाई का 1%।
स्क्रीन चौड़ाई के अनुसार फुल-ब्लीड सेक्शन।
width: 100vw;
व्यूपोर्ट ऊँचाई का 1%।
स्क्रीन ऊँचाई ढकने वाले हीरो सेक्शन या ओवरले।
height: 100vh;
व्यूपोर्ट के छोटे आयाम का 1%।
किसी भी ओरिएंटेशन में स्क्रीन पर फ़िट होने वाले तत्व।
font-size: 5vmin;
व्यूपोर्ट के बड़े आयाम का 1%।
व्यूपोर्ट के प्रमुख अक्ष को भरना।
font-size: 5vmax;
छोटी व्यूपोर्ट ऊँचाई का 1% (ब्राउज़र UI पूरी तरह दिखता है)।
मोबाइल फुल-हाइट सेक्शन जो ब्राउज़र के खुले UI के ऊपर फ़िट रहें।
height: 100svh;
बड़ी व्यूपोर्ट ऊँचाई का 1% (ब्राउज़र UI छिपा हुआ)।
ऐसे बैकड्रॉप जो ब्राउज़र UI सिकुड़ने पर भी स्क्रीन ढकें।
height: 100lvh;
डायनामिक व्यूपोर्ट ऊँचाई का 1%, जो ब्राउज़र UI के दिखने-छिपने को फ़ॉलो करती है।
100vh का मोबाइल समाधान: ब्राउज़र UI दिखते ही ऊँचाई रीसाइज़ हो जाती है।
height: 100dvh;
छोटी व्यूपोर्ट चौड़ाई का 1%।
सबसे संकरी व्यूपोर्ट स्थिति के लिए svh का चौड़ाई-संस्करण।
width: 100svw;
बड़ी व्यूपोर्ट चौड़ाई का 1%।
सबसे चौड़ी व्यूपोर्ट स्थिति के लिए lvh का चौड़ाई-संस्करण।
width: 100lvw;
डायनामिक व्यूपोर्ट चौड़ाई का 1%, जो ब्राउज़र UI को फ़ॉलो करती है।
जब व्यूपोर्ट UI के साथ रीसाइज़ होता है तो dvh का चौड़ाई-संस्करण।
width: 100dvw;
इनलाइन अक्ष के अनुदिश व्यूपोर्ट आकार का 1% (क्षैतिज राइटिंग मोड में चौड़ाई)।
राइटिंग दिशा को फ़ॉलो करने वाली व्यूपोर्ट साइज़िंग।
width: 50vi;
ब्लॉक अक्ष के अनुदिश व्यूपोर्ट आकार का 1% (क्षैतिज राइटिंग मोड में ऊँचाई)।
वर्टिकल राइटिंग मोड में भी सही रहने वाली व्यूपोर्ट साइज़िंग।
height: 50vb;
फ़्लूइड
न्यूनतम और अधिकतम के बीच बंधा हुआ पसंदीदा मान।
ऐसी फ़्लूइड टाइपोग्राफ़ी जो कभी न्यूनतम या अधिकतम सीमा पार न करे।
width: clamp(320px, 80vw, 1100px);
कॉमा से अलग किए गए अपने आर्ग्युमेंट्स में सबसे छोटा।
किसी साइज़ को सीमित करना ताकि वह कभी अधिकतम से आगे न जाए।
width: min(100%, 600px);
कॉमा से अलग किए गए अपने आर्ग्युमेंट्स में सबसे बड़ा।
ऐसा न्यूनतम आकार लागू करना जो व्यूपोर्ट के साथ बढ़े।
width: max(50%, 300px);
कोण
पूरे वृत्त का 1/360।
रोटेशन ट्रांसफ़ॉर्म और ग्रेडिएंट कोण स्थितियाँ।
transform: rotate(45deg);
रेडियन; 1rad ≈ 57.2958deg।
गणित से निकले कोण, जैसे जेनरेट किए गए ट्रांसफ़ॉर्म।
transform: rotate(1.5708rad);
ग्रेडियन; 400grad = पूरा वृत्त।
लेगेसी या सर्वे-शैली के कोण मान।
transform: rotate(100grad);
1turn = एक पूरा 360° वृत्त।
एक नज़र में पढ़े जाने वाले पूर्ण या अर्ध चक्र।
transform: rotate(0.5turn);
समय
एक सेकंड।
एनिमेशन और ट्रांज़िशन की अवधि।
transition: opacity 0.3s;
एक मिलीसेकंड (1s = 1000ms)।
छोटे UI फ़ीडबैक एनिमेशन और डिले।
animation-duration: 150ms;
रेज़ॉल्यूशन
आउटपुट के प्रति इंच डॉट।
प्रिंट-लक्षित रेज़ॉल्यूशन मीडिया क्वेरी।
@media (min-resolution: 300dpi)
प्रति px इकाई डॉट; 1dppx मानक 96dpi डिस्प्ले के बराबर।