Chapter 4 — CSS O'lchov Birliklari

---

4.1 Absolute vs Relative Units

Example

styles.css
CSSNusxalash
01.fixed { width: 300px; }        /* Absolute - har doim bir xil */
02.relative { width: 50%; }       /* Ota elementga nisbatan */
03.font-em { font-size: 1.5em; }  /* Ota elementning font-size'iga nisbatan */
04.font-rem { font-size: 1.5rem; } /* ROOT (html) elementning font-size'iga nisbatan */

4.2 Viewport Units

Example

styles.css
CSSNusxalash
01.hero { height: 100vh; }  /* Butun ekran balandligi */
02.sidebar { width: 25vw; } /* Ekran kengligining 25% */

⚠️ Common Mistake
Mobil brauzerlarda 100vh manzil satri tufayli kutilganidan balandroq bo'lishi mumkin — bu "mobile viewport bug" deb ataladi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Bitta elementga px, boshqasiga % orqali kenglik bering va ota konteyner o'lchami o'zgarganda ularni solishtiring.

🟡 Exercise 2 — Medium

Task: rem asosida to'liq responsive typography tizimi yarating — html { font-size: 16px }dan boshlab barcha sarlavhalarni remda belgilang.

🔴 Exercise 3 — Hard

Task: 100vh bilan to'liq ekranli Hero Section yarating va uni mobil qurilmada test qiling — agar muammo topsangiz, 100dvh (dynamic viewport height) bilan almashtiring.

---

🐛 Debugging Challenge

styles.css
CSSNusxalash
01.parent { font-size: 20px; }
02.child { font-size: 1.5em; }
03.grandchild { font-size: 1.5em; }

Your Task: .grandchild elementining haqiqiy font-size'i necha piksel bo'ladi?

<details> <summary>Solution</summary> `.child`: 20 * 1.5 = 30px. `.grandchild`: 30 * 1.5 = 45px (ota elementning HISOBLANGAN qiymatiga nisbatan, root'ga emas). Bu `em`ning kumulyativ xarakteri. </details>

---

📌 Chapter Summary

px — mutlaq, %/em — nisbiy (ota elementga), rem — nisbiy (root elementga), vw/vh — viewport'ga nisbatan. Har birining o'z qo'llanilish sohasi bor.

🎯 Key Takeaways

• rem — typography uchun eng bashorat qilinadigan birlik
• em ichma-ich strukturalarda ehtiyotkorlik talab qiladi
• Viewport birliklari (vw/vh) to'liq ekranli bo'limlar uchun foydali, lekin mobil cheklovlarni yodda tuting

⚡ Quick Cheat Sheet

code.text
TEXTNusxalash
01px:  mutlaq
02%:   ota elementga nisbiy
03em:  ota font-size'iga nisbiy (kumulyativ)
04rem: root font-size'iga nisbiy (barqaror)
05vw/vh: viewport kengligi/balandligiga nisbiy

---