Blog

CSS Units Kya Hote Hain – CSS Units Kaise Kaam Karte Hain

CSS Units aur Measurements Kya Hota Hai ?

Jab bhi hum CSS mein kisi element ka size define karte hain, toh humein units ka use karna padta hai. CSS mein do tareeke ki units hoti hain: Absolute Units aur Relative Units. Inka sahi tarike se use karna ek achhe responsive design ke liye bahut zaroori hota hai.

1. Absolute Units

Absolute units wo hoti hain jo ek fixed size hota hai aur kisi doosre element ya screen size par depend nahi karti. Yeh har jagah ek hi tarike se dikhai deti hain, chahe device ka resolution ya size kuch bhi ho.

(a) px (Pixels)

Pixel ek chhoti si dot hoti hai jo screen par ek specific position par hoti hai. Jab hum kisi element ka size pixels mein dete hain, toh wo screen ke physical pixels ke base par render hota hai.

div {
  width: 200px;
  height: 100px;
}

Iska matlab hai ki div element ki width 200 pixels aur height 100 pixels hogi, jo kisi bhi device par exactly itni hi rahegi.

Kab Use Karein?

  • Jab aapko ek fixed layout chahiye.
  • Buttons, icons, aur images ke exact size ko define karne ke liye.
  • Jab design ka har element ek specific size ka ho.

(b) pt (Points)

Point ek traditional unit hai jo mostly printing ke liye use hoti hai. 1 point = 1/72 inch hota hai. Agar aap kisi text ka size 12pt rakhte hain, toh wo ek printed page par ek fixed size lega.

p {
  font-size: 12pt;
}

Yeh 12pt ka font-size mostly printed documents ke liye better hota hai.

Kab Use Karein?

  • Jab aap kisi content ko print-friendly banana chahte hain.
  • Jab aap web aur print ke beech consistency chahte hain.

(c) cm (Centimeters) & mm (Millimeters)

Centimeter aur millimeter units real-world measurements ke base par hoti hain. Ye physical measurements ke liye kaam aati hain, jaise ki print media ya kisi specific dimension ke liye jo inch ya cm mein define kiya gaya ho.

div {
  width: 5cm;
  height: 20mm;
}

Yeh properties exact 5 cm wide aur 20 mm high hongi, chahe koi bhi screen size ho.

Kab Use Karein?

  • Jab kisi printed material ke dimensions specify karne ho.
  • Jab kisi web element ka size real-world measurement se match karna ho.

(d) in (Inches)

Inch ek standard unit hai jo physical size ke liye use hoti hai. Web design mein iska use kam hota hai, lekin printing aur high-DPI devices ke liye kabhi-kabhi useful ho sakta hai.

div {
  width: 2in;
}

Yeh 2 inches ka ek fixed size define karega, jo kisi bhi device par exactly itna hi rahega.

Kab Use Karein?

  • Print-friendly web pages ya documents ke liye.
  • Jab kisi element ka size ek fixed physical dimension se match karna ho.

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 ye har device aur screen size ke hisaab se automatically adjust ho jaati hain.

(a) em (Relative to Parent Font Size)

em ek unit hai jo kisi element ke parent element ke font-size par depend karta hai. Agar parent ka font-size change hota hai, toh child elements bhi automatically adjust ho jaate hain.

body {
    font-size: 16px;
}

p {
    font-size: 2em;
}

Yahan p element ka font-size 2em hai, jo body ke font-size (16px) ka 2 times hoga, yani 32px.

Kab Use Karein?

  • Jab aapko ek scalable layout chahiye.
  • Jab aap text elements ko easily resize karna chahte hain.
  • Jab aap ek relative design banana chahte hain jo parent elements ke according change ho sake.

(b) rem (Relative to Root Element <html> Size)

rem unit em ki tarah hi hoti hai, lekin yeh hamesha <html> tag ke font-size par depend karti hai. Isse fayda yeh hota hai ki agar root font-size change ho, toh saare elements ek predictable way mein adjust ho jaate hain.

html {
    font-size: 16px;
}

p {
    font-size: 1.5rem;
}

Yahan p ka font-size 1.5rem hai, yani 16px × 1.5 = 24px hoga.

Kab Use Karein?

  • Jab aap ek consistent scaling system chahte hain.
  • Jab accessibility aur responsiveness par dhyaan dena ho.
  • Jab aap ek modular design system banana chahte hain.

(c) vh (Viewport Height) & vw (Viewport Width)

Viewport units screen ke current size ke basis par define hoti hain.

  • vh – Puri screen height ka ek percentage hota hai.
  • vw – Puri screen width ka ek percentage hota hai.
div {
    width: 50vw;
    height: 30vh;
}

Iska matlab div element ki width viewport ki 50% width aur height 30% height hogi.

Kab Use Karein?

  • Full-screen sections aur layouts ke liye.
  • Responsive designs aur dynamic elements ke liye.
  • Hero sections ya sliders ke liye.

(d) % (Percentage)

Percentage unit ek element ke parent ka percentage hoti hai. Iska use mostly flexible layouts aur responsive designs ke liye hota hai.

div {
    width: 80%;
}

Yeh div apne parent container ki width ka 80% lega.

Kab Use Karein?

  • Flexible layouts banane ke liye.
  • Responsive designs mein parent elements ke according sizing karne ke liye.

(e) ch (Character Width) & ex (x-Height Unit)

ch ek character ki width ke base par size set karta hai.
ex ek font ke lowercase ‘x’ character ke height ke base par hota hai.

p {
    width: 30ch;
    line-height: 2ex;
}

Kab Use Karein?

  • Text elements ke width ko better readability ke liye adjust karne ke liye.
  • Jab aap ek fluid text layout banana chahte hain.

Agar aapko ek fixed layout chahiye toh absolute units use karein. Lekin agar aap ek responsive aur flexible design chahte hain, toh relative units best choice hain. Har unit ka apna ek specific use case hota hai, isliye inka smartly use karna important hai

Quiz: Test Your Knowledge on CSS Units

Bonus: Practical Application!

Aaj hi apne webpage par CSS units ka istemal karke dekhein!

CSS units ko sahi tareeke se samajhne ke liye different types jaise absolute units (px, cm, mm, in) aur relative units (%, em, rem, vh, vw) ka upayog karein aur apne webpage ke layout aur responsiveness ko aur bhi effective banayein.

Leave a Reply