CSS Academy · पाठ

Absolute Units: px, pt, cm

जानिए कि pixels, points और centimeters जैसी fixed absolute units का उपयोग कब करना है।

पाठ 1, कुल 4 में से13 चरण

Absolute Units: px, pt, cm, CoddyKit पर CSS Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। आप नीचे पूरा पाठ निःशुल्क पढ़ सकते हैं—फिर अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर के साथ ब्राउज़र में इसका व्यावहारिक अभ्यास कर सकते हैं। यह CSS Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

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

CSS इकाइयाँ दो श्रेणियों में आती हैं: निरपेक्ष (स्थिर, वास्तविक दुनिया के माप) और सापेक्ष (किसी अन्य चीज़ के आधार पर बदलने वाले माप)। निरपेक्ष इकाइयाँ डिवाइस से स्वतंत्र भौतिक माप होती हैं।

px — पिक्सेल

पिक्सेल (px) स्क्रीन पर सबसे अधिक उपयोग की जाने वाली निरपेक्ष इकाई है। मानक डिस्प्ले पर 1px = 1 डिवाइस पिक्सेल होता है। उच्च-DPI (रेटिना) स्क्रीन पर CSS पिक्सेल कई डिवाइस पिक्सेल से संबंधित होते हैं, जिससे एलिमेंट का दृश्य आकार समान बना रहता है।

<button class="button">10px 20px padding</button>

pt — पॉइंट

पॉइंट (pt) प्रिंट डिज़ाइन की एक इकाई है: 1pt = एक इंच का 1/72। CSS में 1pt = 4/3px (लगभग 1.33px) होता है। इसका मुख्य उपयोग टाइपोग्राफी के लिए प्रिंट स्टाइलशीट में किया जाता है।

<p class="print-text">This text is sized in points (12pt), the unit used in print stylesheets.</p>

cm, mm, in — भौतिक इकाइयाँ

CSS सेंटीमीटर (cm), मिलीमीटर (mm) और इंच (in) का समर्थन करता है। प्रिंट के संदर्भ में ये उपयोगी हैं, लेकिन स्क्रीन पर अविश्वसनीय होती हैं क्योंकि स्क्रीन का DPI अलग-अलग होता है।

<div class="page">A4-width page (21cm), used for print layouts</div>

स्क्रीन पर px: व्यावहारिक उपयोग

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

डिवाइस पिक्सेल अनुपात

आधुनिक डिस्प्ले का डिवाइस पिक्सेल अनुपात (DPR) > 1 होता है। 2x रेटिना स्क्रीन प्रत्येक CSS पिक्सेल के लिए 2 डिवाइस पिक्सेल रेंडर करती है। इसी कारण उच्च-DPI छवियों का आकार डिस्प्ले आकार से 2x या 3x होना आवश्यक है।

<img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='300'><rect width='400' height='300' fill='%23ff6347'/><circle cx='200' cy='150' r='100' fill='%231e90ff'/></svg>" alt="sample image" />

px का उपयोग कब करें

इनके लिए px का उपयोग करें:

बॉर्डर की चौड़ाई (1px स्पष्ट दिखाई देता है)
शैडो और ट्रांसफ़ॉर्म
मीडिया क्वेरी ब्रेकपॉइंट (हालाँकि em-आधारित ब्रेकपॉइंट अधिक विश्वसनीय होते हैं)
स्थिर UI एलिमेंट, जहाँ पिक्सेल पर सटीक नियंत्रण आवश्यक हो

टाइपोग्राफी के लिए px का उपयोग NOT कब करें

html या body पर font-size: 16px सेट करने से कई ब्राउज़र में उपयोगकर्ता की सुलभता प्राथमिकता बदल जाती है। इसके बजाय ब्राउज़र के डिफ़ॉल्ट के सापेक्ष rem का उपयोग करें।

Q — चौथाई मिलीमीटर

q इकाई एक मिलीमीटर का 1/4 होती है। इसका उपयोग सूक्ष्म टाइपोग्राफ़िक नियंत्रण के लिए जापानी प्रिंट टाइपोग्राफी में किया जाता है। सामान्य वेब डिज़ाइन में इसका उपयोग बहुत कम होता है।

PC — पाइका

पाइका (pc) 12 पॉइंट या एक इंच के 1/6 के बराबर होता है। पॉइंट की तरह पाइका भी प्रिंट इकाइयाँ हैं, जिनकी डिजिटल स्क्रीन के लिए बहुत कम आवश्यकता होती है।

प्रिंट स्टाइलशीट में निरपेक्ष इकाइयाँ

CSS में प्रिंट स्टाइलशीट निरपेक्ष इकाइयों के उपयोग का मुख्य उचित संदर्भ हैं। भौतिक इकाइयाँ यह सुनिश्चित करती हैं कि कागज़ पर छपने वाले पृष्ठ के आयाम सटीक हों।

<div class="print-body">
    <p class="page-break">Section one (page breaks after this when printed)</p>
    <p>Section two</p>
  </div>

त्वरित जाँच

कौन-सी निरपेक्ष CSS इकाई एक इंच के 1/72 के बराबर होती है?

इंटरैक्टिव पाठ में इसका उत्तर दें

सारांश

निरपेक्ष इकाइयाँ पैरेंट एलिमेंट से स्वतंत्र स्थिर माप होती हैं। px स्क्रीन के लिए व्यावहारिक इकाई है। भौतिक इकाइयों (pt, cm, in) का उपयोग प्रिंट स्टाइलशीट में किया जाता है। टाइपोग्राफी के लिए px का उपयोग न करें — यह उपयोगकर्ता की फ़ॉन्ट-आकार प्राथमिकताओं को बदल देता है। इसके बजाय rem का उपयोग करें।

शुरुआत निःशुल्क

एआई शिक्षक के साथ CSS सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 40
पाठ: 159

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “Absolute Units: px, pt, cm” पाठ निःशुल्क है?

हाँ—“Absolute Units: px, pt, cm” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और CSS Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। CSS Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“Absolute Units: px, pt, cm” में मैं क्या सीखूँगा?

जानिए कि pixels, points और centimeters जैसी fixed absolute units का उपयोग कब करना है। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ CSS Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या CSS Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर CSS Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।

“Absolute Units: px, pt, cm” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस CSS Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर CSS Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← CSS Academy पर वापस जाएँ