22-dars

O'zing nomla

1. Responsive dizayn nima?

Responsive dizayn — bu sayt har xil ekranlarda buzilmasdan, foydalanuvchiga moslashib ishlashi.

🎯 Responsive dizaynning asl maqsadi

Responsive dizayn:

telefon

planshet

laptop

katta monitor

👉 hammasida bir xil sayt emas, 👉 bir xil tajriba (UX) berishi kerak.

Masalan:

mobil'da → bitta ustun

desktop'da → ikki ustun lekin o'qish, topish, bosish bir xil qulay

❌ Xato o'ylash:

320px → 768px → 1024px → tayyor

✅ To'g'ri o'ylash:

Kontent qachon siqildi? Qachon o'qish qiyinlashdi? Qachon element buzildi?

📌 Breakpoint ekran uchun emas — kontent uchun qo'yiladi

🔍 Responsive nimadan iborat?

Responsive dizayn 4 ustunga tayanadi:

1. Moslashuvchan o'lchamlar

%, fr, auto, minmax, clamp

2. Layout moslashuvi

Flex / Grid

ustunlar soni o'zgaradi

3. Media query

faqat majbur bo'lsa

4. Typography moslashuvi font, line-height, spacing

🧪 Mini misol (real hayot)

Mobil:

[ Text ]
[ Image ]

Desktop:

[ Text | Image ]

Bu:

bir xil kontent

boshqa layout

bir xil UX

2. Mobile-first degani nima?

Mobile-first — saytni avval telefon uchun, keyin kattaroq ekranlar uchun kengaytirib borish.

❌ Noto'g'ri tushuncha

"Mobile-first — bu mobil dizayn chiroyli bo'lsa bas"

✅ To'g'ri tushuncha

"Mobile-first — bu default CSS = mobil degani"

🧠 Texnik jihatdan Mobile-first nima?

Mobile-first degani:

Media querysiz CSS → mobil uchun

min-width bilan → kattaroq ekranlar

To'g'ri yondashuv:

.card {
  padding: 12px;
  font-size: 14px;
}

/* tablet va yuqori */
@media (min-width: 768px) {
  .card {
    padding: 20px;
    font-size: 16px;
  }
}

👉 Default holat — mobil

📱 Nega mobile-first muhim?

1️⃣ Real hayot

Trafikning katta qismi — mobil

SEO (Google) — mobile-first indexing

2️⃣ Performance

Mobil qurilmalar sekinroq

Kam CSS → tezroq render

3️⃣ Dizayn intizomi

Majbur qilib soddalashtiradi

Keraksiz elementlar yo'qoladi

🧪 Mini real misol

Mobile:

[ Title ]
[ Text ]
[ Button ]

Desktop:

[ Title | Button ]
[ Text           ]

👉 Bu qo'shimcha layout, yangi kontent emas