CSS Units Kya Hote Hain?

Pixels, Ems, Rems, aur Viewport Units ko Detail me Samjhein

Introduction to CSS Units

Jab bhi hum CSS mein kisi element ka size (jaise width, height, ya font-size) define karte hain, toh humein units ka use karna padta hai. CSS mein do tarah ki units hoti hain: Absolute Units aur Relative Units. Inka sahi tarike se use karna ek acche responsive design ke liye bahut zaroori hota hai.

1. Absolute Units

Absolute units wo hoti hain jinka ek fixed size hota hai aur woh kisi doosre element ya screen size par depend nahi karti. Yeh har jagah ek hi size ki dikhai deti hain.

px (Pixels)

Pixel (px) web design me sabse common absolute unit hai. 1px screen ke ek physical pixel ko represent karta hai. Inka size fixed rehta hai.

div { width: 300px; font-size: 16px; }

2. Relative Units

Relative units wo hoti hain jo kisi doosre element ya screen size ke according adjust hoti hain. Yeh responsive design ke liye best hoti hain, kyunki yeh har device par automatically adjust ho jaati hain.

em (Relative to Parent's Font Size)

em unit parent element ke font-size par depend karti hai. Agar parent ka font-size 16px hai, toh 2em 32px ke barabar hoga.

.parent { font-size: 20px; }
.child { font-size: 1.5em; /* 20px * 1.5 = 30px */ }

rem (Relative to Root Element's Font Size)

rem (root em) hamesha root element (<html>) ke font-size par depend karti hai. Isse predictable scaling milti hai, isliye modern web design me iska bohot use hota hai.

html { font-size: 16px; }
p { font-size: 1.25rem; /* 16px * 1.25 = 20px */ }

% (Percentage)

Percentage unit parent element ke size ke relative hoti hai. Jaise, width: 50%; ka matlab hai ki element ki width uske parent ki width ki 50% hogi.

.parent { width: 400px; }
.child { width: 50%; /* 400px * 0.50 = 200px */ }

vw and vh (Viewport Units)

Viewport units browser window (viewport) ke size ke relative hoti hain.

  • vw (Viewport Width): 1vw viewport ki width ka 1% hota hai.
  • vh (Viewport Height): 1vh viewport ki height ka 1% hota hai.
/* Ek full-screen hero section banane ke liye */
.hero {
  width: 100vw;
  height: 100vh;
}

Key Takeaways

  • Absolute Units (px): Fixed size ke liye use hoti hain, jaise borders ya icons.
  • Relative Units (em, rem, %): Flexible aur responsive layouts ke liye best hain.
  • rem ka use karna typography (font-size) ke liye ek modern aur best practice hai kyunki yeh predictable scaling deta hai.
  • vw aur vh units full-page sections ya fluid layouts banane ke liye bohot powerful hain.
  • Responsive design ke liye relative units ko absolute units par prefer karein.
Bonus: Practical Application!
Apne webpage par aaj hi alag-alag units ka use karke dekhein!

Ek `div` banayein aur uski width ko px, %, aur vw me set karke dekhein ki browser window resize karne par kya fark padta hai.

Practice in CSS Editor
Test Your Knowledge!
Kya aap CSS Units ke baare mein seekh chuke hain? Chaliye dekhte hain!

Apni knowledge test karne ke liye is quick quiz ko dein.

Start Quiz