CSS Units

एक birdhouse बनाने की कल्पना करें। अगर आप एक rigid लकड़ी के ruler इस्तेमाल करते हैं, तो आप हर चीज़ exact inches (pixels) में measure करते हैं। यह काम करता है, लेकिन यह पूरी तरह unyielding है। अगर आप बाद में पूरे birdhouse को दुगना बड़ा बनाने का फ़ैसला करते हैं, तो आपको हर measurement हाथ से फिर से calculate करना होगा। अब, elastic rulers इस्तेमाल करने की कल्पना करें। आप अपने measurements को entrance hole के size के relative define करते हैं (relative units)। अगर आप entrance hole को दुगना बड़ा बनाते हैं, तो पूरा birdhouse automatically proportionally expand हो जाता है। CSS units वही rulers हैं। pixels, rem, em, या viewport units के बीच चुनना तय करता है कि आपके elements अलग-अलग screen sizes में कैसे scale और adapt होते हैं।

In this page:

Rigid Pixel Units (px)
Flexible Root em Units (rem)
Contextual em Units (em)
Viewport Width और Height (vw/vh)
Percentage Units (%)

Syntax

css

selector {
  width: number + unit;  /* px, em, rem, %, vw, vh */
}

Rigid Pixel Units (px)

Pixels (px) absolute units हैं। एक pixel किसी standard computer screen पर color के एक single physical dot को represent करता है। क्योंकि pixels absolute हैं, ये पूरी तरह rigid हैं और दूसरे elements या browser settings के relative scale नहीं होते।

Note:

border widths जैसी properties के लिए pixel units इस्तेमाल करें जिन्हें exact, unyielding precision चाहिए।
Accepted values:
1px — एक CSS pixel (लगभग 1/96 inch)
<number>px — कोई भी integer या decimal length
0 — lengths के लिए unitless zero allowed है

Warning: font sizes के लिए pixel units इस्तेमाल करना users को अपनी browser settings में text scale करने से रोक सकता है, web accessibility guidelines violate करते हुए।

उदाहरण: Rigid Pixel Units (px)

css

<style>
.box {
  border: 2px solid black;
}
</style>
<div class="box">2px border stays exactly 2px always</div>

Flexible Root em Units (rem)

rem (Root Em) unit एक relative unit है। यह root html element के base font size (जो ज़्यादातर browsers में default रूप से 16px है) के relative values calculate करता है। यह rem units को highly accessible और responsive बनाता है।

Note:

यह सुनिश्चित करने के लिए कि वे browser text settings के साथ proportionally scale हों, सभी typography, padding, और margins के लिए rem units इस्तेमाल करें।
Accepted values:
1rem — root html font-size के बराबर (default रूप से 16px)
1.5rem — root font-size का 1.5 गुना
0.5rem — root font-size का आधा

Warning: proportional sizes को साफ़ तरीके से set करने के लिए हमेशा decimal values (जैसे 1.5rem) लिखें।

उदाहरण: Flexible Root em Units (rem)

css

<style>
html { font-size: 16px; }
p { font-size: 1.5rem; }
</style>
<p>1.5rem = 1.5 times the root font size</p>

Contextual em Units (em)

em unit एक relative unit है जो element के parent container के font size के relative values calculate करता है। यह em units को उस specific component के text size के साथ proportionally spacing (जैसे padding) scale करने के लिए बेहद उपयोगी बनाता है।

Note:

buttons के अंदर padding और margins के लिए em units इस्तेमाल करें ताकि spacing text size के proportional रहे।
Accepted values:
1em — element के अपने font-size के बराबर (या parent का, font-size के लिए खुद)
1.5em — उस font-size का 1.5 गुना
0.5em — उस font-size का आधा

Warning: कई em-sized elements को nest करना font sizes को exponentially multiply और control से बाहर shrink या grow करा सकता है।

उदाहरण: Contextual em Units (em)

css

<style>
.parent { font-size: 20px; }
.child { padding: 1em; }
</style>
<div class="parent">
  <span class="child">1em padding = 20px, matching the parent's font-size</span>
</div>

Viewport Width और Height (vw/vh)

Viewport units browser window size के relative होते हैं: 1vw viewport width का 1% होता है, और 1vh viewport height का 1% होता है। यह इन्हें full-screen layouts बनाने के लिए perfect बनाता है।

Note:

जल्दी full-screen landing pages या hero section grids बनाने के लिए height: 100vh इस्तेमाल करें।
Accepted values:
1vw — viewport width का 1%
1vh — viewport height का 1%
100vw / 100vh — पूरी viewport width या height
1dvh — dynamic viewport height का 1% (mobile-friendly)

Warning: viewport width units (vw) में size किया गया text mobile screens पर unreadably tiny हो सकता है; limits enforce करने के लिए clamp() इस्तेमाल करें।

उदाहरण: Viewport Width and Height (vw/vh)

css

<style>
.hero {
  height: 100vh;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
<div class="hero">Always fills the full viewport height</div>

Percentage Units (%)

percentage (%) unit एक relative unit है जो parent container element के size के relative values calculate करता है, इसे fluid multi-column grids बनाने के लिए perfect बनाते हुए।

Note:

padding को percentage column grids तोड़ने से रोकने के लिए globally box-sizing: border-box set करें।
Accepted values:
50% — reference size का आधा (आमतौर पर parent)
100% — पूरा parent size
<number>% — property जो भी percentage allow करे

Warning: साफ़ parent widths set न करना percentage-based child elements को 0 पर collapse करा सकता है।

उदाहरण: Percentage Units (%)

css

<style>
.parent {
  width: 500px;
  background: #ddd;
  padding: 8px;
}
.child {
  width: 50%;
  background: coral;
  color: white;
  padding: 8px;
}
</style>
<div class="parent">
  <div class="child">50% of its 500px parent</div>
</div>

Live Example

Chapter Quiz — Complete all 5 topics to unlock

0/5 topics done

Complete these topics first:

← Previous Lesson CSS Gap Next Lesson → CSS Absolute Units

CSS Units

Rigid Pixel Units (px)

Flexible Root em Units (rem)

Contextual em Units (em)

Viewport Width और Height (vw/vh)

Percentage Units (%)

Chapter Quiz — Complete all 5 topics to unlock

Login to run this code