ਤੁਹਾਨੂੰ ਕਿਹੜੀਆਂ 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` **ਮਿਸ਼ਰਤ** nesting ਦੁਆਰਾ (ਇੱਕ ਬਾਲ ਦਾ ਬਾਲ ਗੁਣਾ ਕਰਦਾ ਹੈ), ਜੋ ਅਪ੍ਰਤੱਖ ਰੂਪ ਵਿੱਚ ਘੁੰਮ ਸਕਦਾ ਹੈ। `rem` ਹਮੇਸ਼ਾ root ਨੂੰ ਹਵਾਲਾ ਦਿੰਦਾ ਹੈ, ਇਸ ਲਈ ਇਹ ਭਵਿੱਖਬਾਣੀ ਯੋਗ ਹੈ — ਫੌਂਟ ਸਾਈਜ਼ ਅਤੇ ਸਪੇਸਿੰਗ ਲਈ ਜਾਓ। `em` ਦੀ ਵਰਤੋਂ ਕਰੋ ਜਦੋਂ ਤੁਸੀਂ *ਚਾਹੁੰਦੇ* ਹੋ ਕਿ sizing ਸਥਾਨਕ ਫੌਂਟ ਦੇ ਸੰਬੰਧ ਵਿੱਚ ਹੋ (ਜਿਵੇਂ ਕਿ ਬਟਨ 'ਤੇ padding ਜੋ ਇਸ ਦੇ ਪਾਠ ਦੇ ਨਾਲ ਪੱਥਰ ਕਰਦਾ ਹੈ)।

## ਸੰਬੰਧਿਤ ਇਕਾਈਆਂ ਪਹੁੰਚਯੋਗਤਾ ਲਈ ਮਹੱਤਵਪੂਰਨ ਕਿਉਂ ਹਨ

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

Type ਲਈ `rem` ਦੀ ਵਰਤੋਂ ਕਰਨ ਨਾਲ ਉਹ ਉਪਭੋਗਤਾ ਸਤਿਸ਼ਟ ਹੁੰਦੇ ਹਨ ਜੋ ਵੱਡਾ ਡਿਫਾਲਟ ਫੌਂਟ ਸਥਾਪਿਤ ਕਰਦੇ ਹਨ — ਇੱਕ ਅਸਲ ਪਹੁੰਚਯੋਗਤਾ ਜਿੱਤ ਜਿਸ ਨੂੰ `px` ਤੋੜਦਾ ਹੈ।

## ਇਹ ਮਹੱਤਵਪੂਰਨ ਕਿਉਂ ਹੈ

ਸਹੀ ਇਕਾਈ layouts ਨੂੰ reactive ਅਤੇ ਪਹੁੰਚਯੋਗ ਬਣਾਉਂਦੀ ਹੈ: type/spacing ਲਈ `rem` (ਭਵਿੱਖਬਾਣੀ ਯੋਗ + ਉਪਭੋਗਤਾ ਸੈਟਿੰਗਾਂ ਦਾ ਸਤਿਸ਼ਟ), fluid layout ਲਈ `%`/`vw`/`vh`, ਸਥਿਰ ਵੇਰਵਾ ਲਈ `px`, ਅਤੇ locally-relative sizing ਲਈ `em`।

Newer viewport ਇਕਾਈਆਂ (`dvh`, `svh`) mobile address-bar ਦੀ ਉਚਾਈ ਦੀਆਂ ਸਮੱਸਿਆਵਾਂ ਨੂੰ ਵੀ ਠੀਕ ਕਰਦੀਆਂ ਹਨ।