CSS Absolute Units

पूरी Absolute Unit Family

px से आगे, CSS pt (points, इंच का 1/72), pc (picas, 12 points), in (inches), cm (centimeters), और mm (millimeters) define करती है। ये सभी fixed, non-scaling units हैं — CSS specification के अनुसार 1in हमेशा 96px के बराबर होता है, screen resolution या user settings चाहे जो भी हों।

उदाहरण: The Full Absolute Unit Family

<style>
.a { width: 1in; background: steelblue; color: white; padding: 4px; margin-bottom: 4px; }
.b { width: 2.5cm; background: seagreen; color: white; padding: 4px; margin-bottom: 4px; }
.c { width: 25mm; background: coral; color: white; padding: 4px; }
</style>
<div class="a">1 inch</div>
<div class="b">2.5 centimeters</div>
<div class="c">25 millimeters</div>

Absolute Units Screen Layouts में शायद ही कभी क्यों Belong करते हैं

क्योंकि absolute units कभी भी user के browser zoom, font-size preferences, या device pixel density के साथ meaningfully scale नहीं होते, इन्हें on-screen text या spacing के लिए इस्तेमाल करना browser text-zoom जैसी accessibility features को हरा सकता है।

यही मुख्य वजह है कि regular web layout के लिए absolute units के बजाय relative units recommend किए जाते हैं।

उदाहरण: Why Absolute Units Rarely Belong in Screen Layouts

<style>
p {
  font-size: 12pt;
}
</style>
<p>Fixed 12pt size ignores browser zoom and text-size preferences</p>

Absolute Units असल में कहाँ Fit होते हैं

Print stylesheets वह एक जगह हैं जहाँ absolute physical units सच में मतलब रखती हैं, क्योंकि एक printed page की असली physical dimensions होती हैं। @media print block के अंदर inches या centimeters में page margins set करना predictable, physically accurate printed output देता है।

उदाहरण: Where Absolute Units Genuinely Fit

<style>
body { font-family: sans-serif; padding: 1rem; }
@media print {
  body {
    margin: 2cm;
  }
}
</style>
<p>Printed with a 2cm margin.</p>

Absolute Units के बीच Convert करना

CSS absolute units के बीच fixed conversion ratios define करता है: 1in = 2.54cm = 25.4mm = 96px = 72pt = 6pc। किसी design spec को (जैसे millimeters में दिया गया एक print brief) CSS में translate करते समय इन ratios को जानना मदद करता है।

उदाहरण: Converting Between Absolute Units

<style>
.a {
  width: 1in;
  background: steelblue;
  color: white;
  padding: 4px;
  margin-bottom: 4px;
}
.b {
  width: 96px;
  background: seagreen;
  color: white;
  padding: 4px;
}
</style>
<div class="a">1in</div>
<div class="b">96px — the same physical width</div>

Absolute बनाम Relative: एक Quick Decision Guide

एक rule of thumb के तौर पर: absolute units सिर्फ print stylesheets या genuinely fixed physical measurements के लिए इस्तेमाल करें, और screen पर लगभग बाकी हर चीज़ के लिए relative units (companion CSS Relative Units topic में covered) इस्तेमाल करें, font sizes, spacing, और component dimensions सहित।

उदाहरण: Absolute vs Relative: A Quick Decision Guide

<style>
@media print {
  .page { margin: 2cm; }
}
.text {
  font-size: 1rem;
}
</style>
<div class="page">
  <p class="text">Absolute units for print, relative units for on-screen text</p>
</div>