Units in CSS ka use length aur size define karne ke liye hota hai.
Bahut saare CSS properties “length” values lete hain, jaise font-size, width, margin, padding, border, etc.
Units in CSS ke do types hote hain:
- Absolute units
- Relative units
CSS Absolute Units
Absolute Units in CSS fixed hote hain, aur jo length di jati hai wo exactly same size me dikhegi.
Ye screen size change hone par change nahi hote, isliye websites ke liye recommended nahi hote. Lekin print layout ke liye use ho sakte hain.
Sabse zyada use hone wala unit hai px (pixels).
Absolute Units in CSS List
| Unit | Name | Description |
|---|---|---|
| px | Pixels | Screens ke liye sabse zyada use hone wala unit (1px = 1/96th of 1in) |
| cm | Centimeters | Mainly print stylesheet me use hota hai |
| mm | Millimeters | Mainly print stylesheet me use hota hai |
| in | Inches | Print ke liye use hota hai (1in = 96px = 2.54cm) |
| pt | Points | Typographical unit (1pt = 1/72 of 1in) |
| pc | Picas | Print unit (1pc = 12 pt) |
Set Font Size With Px
Text size ko px me set karne se tumhe full control milta hai.
Lekin ye responsive nahi hota aur users browser settings se text size change nahi kar paate.
Example
Note: Number aur unit ke beech whitespace nahi hona chahiye. Agar value 0 ho to unit optional hai.
CSS Absolute Units kab use kare?
Absolute Units in CSS tab use karo jab:
- Exact fixed size chahiye
- Print media ke liye design kar rahe ho
- Element ko viewport ke saath scale nahi hona chahiye
Tip: Web design ke liye relative units (em, rem) better hote hain.
CSS Relative Units
Relative Units in CSS kisi dusri length property ke relative hote hain (jaise parent element, root element, ya viewport).
Ye different screen sizes ke liye better scale karte hain, isliye responsive web design ke liye ideal hain.
Tip: em aur rem scalable design ke liye best hote hain.
Relative Units in CSS List
| Unit | Description |
|---|---|
| em | Parent element ke font-size ke relative |
| rem | Root HTML element ke font-size ke relative |
| vw | Viewport width ka 1% (100vw = full width) |
| vh | Viewport height ka 1% (100vh = full height) |
| vmin | Viewport ke smaller dimension ka 1% |
| vmax | Viewport ke larger dimension ka 1% |
| % | Parent element ke size ke relative |
| fr | Available space ka ek part |
| ch | “0” character ki width ke relative |
Viewport = browser window ka size
1vw = viewport width ka 1%. Agar viewport 500px hai, to 1vw = 5px.
Set Font Size With Em
em unit parent element ke font-size ke relative hota hai.
Agar parent ka font-size 16px hai, to 2.5em = 40px hoga.
Example
Set Font Size With Rem
rem unit root HTML element (<html>) ke font-size ke relative hota hai.
em ke opposite, rem hamesha <html> ke font-size ke according hi calculate hota hai.
Default me browser me 1rem = 16px hota hai.
Example
Units in CSS size aur layout control karte hain. Absolute units fixed hote hain, jabki relative units responsive hote hain.
Best practice: responsive design ke liye relative units use karo.
