CSS Relative Units

vmin: Smaller Viewport Dimension

vmin viewport के जिस भी dimension को छोटा है उसका 1% represent करता है — width या height, किसी भी समय जो भी कम हो। यह उन elements को size करने के लिए उपयोगी बनाता है जिन्हें device portrait में हो या landscape में, दोनों में comfortably fit होना चाहिए।

उदाहरण: vmin: The Smaller Viewport Dimension

<style>
.box {
  width: 50vmin;
  height: 50vmin;
  background: steelblue;
  color: white;
}
</style>
<div class="box">Fits comfortably in portrait or landscape</div>

vmax: Larger Viewport Dimension

vmax vmin का mirror image है — viewport के जिस भी dimension को बड़ा है उसका 1%। Practice में इसे vmin से कहीं कम इस्तेमाल किया जाता है, लेकिन यह तब उपयोगी है जब आप specifically चाहते हैं कि कोई element screen के dominant, लंबे dimension के साथ scale हो।

उदाहरण: vmax: The Larger Viewport Dimension

<style>
.box {
  width: 50vmax;
  background: steelblue;
  color: white;
  padding: 10px;
}
</style>
<div class="box">Scales with the longer viewport dimension</div>

em के बजाय rem कब चुनें

em current element के (या उसके parent के) font-size के relative है, जिसका मतलब है कि em-based sizing वाले nested elements unpredictably compound होते हैं — bugs का एक common कारण।

rem हमेशा root html element के font-size के relative है, predictable, non-compounding sizing देते हुए, यही वजह है कि ज़्यादातर modern CSS spacing और typography के लिए rem को default बनाती है।

उदाहरण: When to Choose rem Over em

<style>
html { font-size: 16px; }
.a { font-size: 1.5em; }
.c { font-size: 1.5rem; }
</style>
<div class="a">em compounds when nested inside other em-sized elements</div>
<div class="c">rem always stays relative to the root</div>

Percentage कब viewport Units से ज़्यादा सही होती है

Percentage viewport के बजाय parent element के size के relative है, जो इसे उन components के लिए सही choice बनाती है जिन्हें पूरी screen के बजाय अपने container के साथ scale होना चाहिए — उदाहरण के लिए, किसी flexible layout के अंदर एक sidebar width, या एक image जिसे अपने wrapping div को भरना चाहिए।

उदाहरण: When Percentage Makes More Sense Than viewport Units

<style>
.sidebar {
  width: 25%;
  background: steelblue;
  color: white;
  padding: 10px;
}
</style>
<div style="display:flex; background:#eee;">
  <div class="sidebar">Scales with its parent, not the whole viewport</div>
</div>

Robust Sizing के लिए Relative Units Combine करना

Production CSS अक्सर जानबूझकर relative units को mix करती है: typography और spacing के लिए rem जिन्हें user font preferences का सम्मान करना चाहिए, container-relative sizing के लिए %, और उन hero sections के लिए कम मात्रा में vw/vmin जिन्हें genuinely viewport के साथ scale होना चाहिए।

हर जगह सिर्फ एक ही unit पर निर्भर रहना आमतौर पर हर situation के लिए सही unit चुनने से बुरे results देता है।

उदाहरण: Combining Relative Units for Robust Sizing

<style>
h1 {
  font-size: 2rem;
}
.container {
  width: 80%;
}
.hero {
  min-height: 40vmin;
  background: linear-gradient(135deg, #667eea, #764ba2);
}
</style>
<div class="container">
  <h1>rem, %, and vmin, each used for what it's best at</h1>
  <div class="hero"></div>
</div>