Responsive Design
Responsive Units
%, vw/vh, clamp()
💡 Fixed units (px) ek fixed-size photo frame jaisa hai — chahe deewar badi ho ya chhoti, frame same size. Responsive units (%, vw, clamp()) ek elastic frame jaisa hai — deewar ke size ke hisaab se khud adjust ho jaata hai.
% parent element ke relative. vw/vh viewport ke relative. clamp(min, preferred, max) ek modern, POWERFUL function hai — value ek range mein rehta hai (min se max ke beech), preferred value viewport ke hisaab se scale karta hai — bina media queries ke fluid typography/spacing.
.fluid-heading {
font-size: clamp(1.5rem, 4vw, 3rem);
/* Minimum 1.5rem, Maximum 3rem,
beech mein screen width ke hisaab se smoothly scale karta hai */
}
.responsive-width {
width: clamp(300px, 50%, 600px);
/* Kabhi 300px se chhota nahi, 600px se bada nahi,
beech mein 50% follow karta hai */
}📏
Fixed units (px) ek fixed-size photo frame jaisa hai — chahe deewar badi ho ya chhoti, frame same size. Responsive units (%, vw, clamp()) ek elastic frame jaisa hai — deewar ke size ke hisaab se khud adjust ho jaata hai.
1 / 2
⚡ Quick Recap
- % = parent-relative, vw/vh = viewport-relative
- clamp(min, preferred, max) = fluid, bounded scaling
- clamp() se bina media queries ke responsive typography possible hai
Is page mein (2 subtopics)
min()/max() CSS functions multiple values compare karke smallest/largest choose karte hain — clamp() jaisa hi concept, lekin simpler two-value cases ke liye.
.container {
width: min(90%, 1200px);
/* 90% width le, LEKIN 1200px se zyada kabhi nahi
— chhoti screens par 90%, badi screens par capped */
}
.text {
font-size: max(16px, 2vw);
/* Kam se kam 16px, bada screen par 2vw follow kare */
}Tip: min()/max() clamp() ke "building blocks" hain — clamp(MIN, PREF, MAX) actually max(MIN, min(PREF, MAX)) ke equivalent hai internally.
Container queries (@container) modern CSS feature hai — media queries VIEWPORT size check karti hain, container queries apne PARENT CONTAINER ki size check karti hain. Isse truly reusable, context-aware components ban sakte hain.
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card {
display: flex; /* container 400px se bada ho to horizontal layout */
}
}
/* Same .card component, sidebar mein chhota to vertical,
main area mein bada to horizontal — automatically! */Tip: Container queries relatively new hain (2023+ browser support) — bade design systems mein bahut powerful, kyunki ek hi component har jagah "context-aware" responsive ho sakta hai, viewport size se independent.