Chapter 11 — Media Query va Responsive Strategiya

---

11.1 @media Qoidalari

Example

styles.css
CSSNusxalash
01/* Mobile-first: default (mobil) stil */
02.card { width: 100%; }
03 
04/* Tablet va undan katta */
05@media (min-width: 768px) {
06  .card { width: 50%; }
07}
08 
09/* Desktop */
10@media (min-width: 1024px) {
11  .card { width: 33.33%; }
12}

11.2 Breakpoint Tanlash Strategiyasi

Mental Model

🧠 Breakpointlar "qurilma nomi" (masalan "iPhone") emas, balki "kontent qachon buzila boshlaydi" mantig'iga asoslanishi kerak.

⚠️ Common Mistake
Har bir mumkin bo'lgan ekran o'lchami uchun alohida breakpoint yaratish — bu CSS'ni keraksiz murakkablashtiradi, odatda 2-4 ta breakpoint yetarli.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task: Bitta elementning font-sizeini mobil uchun 16px, 768px+ uchun 20px qiling.

🟡 Exercise 2 — Medium

Task: 3 ta breakpoint (mobil, tablet, desktop) bilan responsive grid (1→2→3 ustun) yarating.

🔴 Exercise 3 — Hard

Task: To'liq mobile-first sahifa yarating — navbar, hero va grid barcha breakpointlarda to'g'ri ishlashini tekshiring.

---

🐛 Debugging Challenge

styles.css
CSSNusxalash
01.sidebar { display: none; }
02@media (min-width: 1024px) {
03  .sidebar { display: none; }
04}

Your Task: Sidebar 1024px'dan katta ekranda ham nega ko'rinmayapti?

<details> <summary>Solution</summary> Media query ichida ham `display: none` qoldirilgan — u `block` yoki `flex`ga o'zgartirilishi kerak edi. To'g'ri kod: `@media (min-width: 1024px) { .sidebar { display: block; } }`. </details>

---

📌 Chapter Summary

Media query'lar @media (min-width/max-width: ...) orqali yoziladi. Mobile-first yondashuv — default mobil, min-width bilan kattalashtirish. Breakpoint tanlash kontent talabiga asoslanishi kerak.

🎯 Key Takeaways

• Mobile-first — zamonaviy standart, kamroq kod talab qiladi
• Breakpoint — qurilma emas, kontent mantig'iga asoslanadi
• 2-4 ta breakpoint odatda yetarli, ortiqchasi murakkablashtiradi

⚡ Quick Cheat Sheet

styles.css
CSSNusxalash
01@media (min-width: 640px) { }  /* sm */
02@media (min-width: 768px) { }  /* md */
03@media (min-width: 1024px) { } /* lg */
04@media (min-width: 1280px) { } /* xl */

---