23-dars

O'zing nomla

1. Media Query nima o'zi?

Media query — bu ekran sharoitiga qarab CSS qo'llash.

Ko'p odam noto'g'ri o'ylaydi:

"Media query = responsive"

❌ Yo'q.

Media query — faqat bitta vosita.

Oddiy misol:

@media (min-width: 768px) {
  .layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

👉 Bu yerda:

768px dan katta bo'lsa — boshqa layout

Media query qachon kerak?

Media query faqat shunda kerak, agar:

layout fizik jihatdan o'zgarmasa bo'lmaydigan bo'lsa

masalan:

1 ustun → 2 ustun

sidebar paydo bo'lishi

nav o'zgarishi

2. Container Query nima?

Container query — element ekranga emas, o'z konteyneriga qarab moslashadi.

Container query qanday ishlaydi?

1️⃣ Avval konteyner e'lon qilinadi:

.card-wrapper {
  container-type: inline-size;
}

2️⃣ Keyin shu konteynerga qarab yoziladi:

@container (min-width: 500px) {
  .card {
    display: flex;
    gap: 16px;
  }
}

👉 Bu:

viewport emas

parent width ga qaraydi

Nega container query juda kuchli?

Oldin:

Komponent qayerda turganini bilishi kerak edi

Hozir:

Komponent o'ziga qarab moslashadi

Bu degani:

component reusable

layout'dan mustaqil

design system'ga mos

Media query vs Container query (qisqa)

Holat	Media Query	Container Query
Asos	Viewport	Parent
Global layout	✅	❌
Component ichida	❌	✅
Reusable	❌	✅
Dizayn system	😐	🔥