તમે કયા CSS એકમો વાપરવા જોઈએ અને ક્યારે?

Question

Accepted Answer

CSS એકમોને **સંપૂર્ણ** (નિશ્ચિત) અને **સાપેક્ષ** (કંઈક સાથે સ્કેલ) માં વહેંચવામાં આવે છે. યોગ્ય પસંદગી પ્રતિક્રિયાશીલ અને સુલભ લેઆઉટ માટે મહત્વપૂર્ણ છે.

## સંપૂર્ણ

```css
.x { width: 100px; }  /* px — fixed pixels; predictable, doesn't scale */
```

વસ્તુઓ માટે `px` વાપરો જે સ્કેલ થવી જોઈએ નહીં (સરહદો, નાના નિશ્ચિત વિગતો).

## સાપેક્ષ — મહત્વપૂર્ણ વિકલ્પો

```css
font-size: 1.5rem;  /* rem — relative to the ROOT font-size (html). Consistent. */
font-size: 1.2em;   /* em — relative to the PARENT's font-size. Compounds! */
width: 50%;         /* % — relative to the parent's size */
width: 50vw;        /* vw — 50% of viewport WIDTH */
height: 100vh;      /* vh — 100% of viewport HEIGHT */
```

## rem વિરુદ્ધ em — નિર્ણાયક તફાવત

```css
html { font-size: 16px; }
.parent { font-size: 20px; }
.parent .child { font-size: 2em;  } /* 2 × 20 = 40px (relative to parent) */
.parent .other { font-size: 2rem; } /* 2 × 16 = 32px (relative to root) */
```

`em` ખોટમાં **સંયોજન** થાય છે (બાળક એક બાળકનો ગુણક કરે છે), જે અણધરી રીતે વધી શકે છે. `rem` હંમેશા મૂળને સંદર્ભ આપે છે, તેથી તે અનુમાનક્ષમ છે — ફોન્ટ સાઈઝ અને અંતર માટે સ્વતંત્ર પસંદ. `em` ત્યારે વાપરો જ્યારે તમે *ઇચ્છો* કે સાઈજિંગ સ્થાનિક ફોન્ટને સંબંધિત હોય (દા.ત. બટન પર પેડિંગ જે તેના ટેક્સ્ટ સાથે સ્કેલ કરે).

## સુલભતા માટે સાપેક્ષ એકમોનું મહત્વ

```css
font-size: 16px;   /* ❌ ignores the user's browser font-size preference */
font-size: 1rem;   /* ✅ scales when the user increases their default size */
```

ટાઈપ માટે `rem` વાપરવું એવા વપરાશકર્તાઓને આદર આપે છે જેમણે મોટો ડિફોલ્ટ ફોન્ટ સેટ કર્યો છે — વાસ્તવિક સુલભતા જીત કે જે `px` તોડી નાખે છે.

## તે કેમ મહત્વપૂર્ણ છે

યોગ્ય એકમ લેઆઉટને પ્રતિક્રિયાશીલ અને સુલભ બનાવે છે: `rem` ટાઈપ/અંતર માટે (અનુમાનક્ષમ + વપરાશકર્તા સેટિંગ્સનો આદર કરે છે), તરલ લેઆઉટ માટે `%`/`vw`/`vh`, નિશ્ચિત વિગતો માટે `px`, અને સ્થાનિક-સાપેક્ષ સાઈજિંગ માટે `em`.

નવર વ્યુપોર્ટ એકમો (`dvh`, `svh`) મોબાઈલ સરનામું-બાર ઊંચાઈ સમસ્યાઓ પણ ઠીક કરે છે.