1.5-bob: Responsive dizayn va media queries

1-QISM — HTML, CSS va zamonaviy stillar · 5-mavzu

1. Kirish va motivatsiya

Bugun saytga kirayotganlarning yarmidan ko'pi — telefonda. Lekin siz kodni katta monitorda yozasiz. Agar faqat o'z ekraningizga qarab dizayn qilsangiz, saytingiz telefonda buzilib ko'rinadi: matn juda kichik, tugmalar bir-biriga yopishgan, gorizontal skroll chiqadi. Foydalanuvchi 3 soniyada chiqib ketadi.

Responsive dizayn — bu saytni har qanday ekranga (telefon, planshet, noutbuk, katta monitor) avtomatik moslash san'ati. Bir xil HTML/CSS, lekin ekran o'lchamiga qarab boshqacha ko'rinadi.

O'xshatish: suvni tasavvur qiling — u qaysi idishga solsangiz, o'shaning shaklini oladi. Responsive sayt ham xuddi shunday: telefonda — bitta ustun, planshetda — ikki, kompyuterda — uch ustun bo'lib "oqadi". Kontent bir xil, lekin idishga moslashadi.

Nega bu majburiy?

• Foydalanuvchilar: mobil trafik — ko'pchilik. Mobilda buziq sayt — yo'qotilgan mijoz.
• Google SEO: Google "mobile-first indexing" ishlatadi — saytni avval telefon versiyasi bo'yicha baholaydi 13.8-bob.
• Bitta kod: alohida "mobil sayt" yasamaysiz — bitta sayt hamma joyda ishlaydi.
• Bu — 1.3 (Flexbox), 1.4 (Grid) va 1.2 (birliklar) ni birlashtiradigan amaliy bob.

2. Nazariya — chuqur tushuntirish

2.1. Responsive dizayn nima?

Responsive (moslashuvchan) dizayn uchta ustunga tayanadi:

1. Egiluvchan layout — qat'iy px o'rniga nisbiy birliklar (%, fr, vw, rem — 1.2) va Flexbox/Grid (1.3–1.4).
2. Media queries — ekran o'lchamiga qarab CSS qoidalarini o'zgartirish 2.3-bob.
3. Egiluvchan media — rasmlar konteynerdan oshmasin (max-width: 100%).

2.2. Viewport meta teg — birinchi va eng muhim qadam

Mobil brauzerlar sahifani, sukut bo'yicha, "keng ekran" (masalan 980px) deb ko'rsatib, keyin uni kichraytiradi — natijada matn juda mayda bo'ladi. Buni to'xtatish uchun viewport meta teg SHART (1.1-bobda ko'rgandik):

<meta name="viewport" content="width=device-width, initial-scale=1">

• width=device-width — sahifa eni qurilma eniga teng bo'lsin (soxta 980px emas).
• initial-scale=1 — boshlang'ich masshtab 1:1.

Bu tegsiz responsive dizayn ishlamaydi. Media query'lar yozsangiz ham, viewport teg bo'lmasa, telefon hammasini kichraytirib yuboradi. Bu — eng ko'p unutiladigan qadam.

2.3. Media query — ekranga qarab CSS

Media query — "agar ekran shu shartga mos kelsa, bu CSS'ni qo'lla" degan qoida:

/* Ekran kengligi kamida 768px bo'lsa, bu qoidalar ishlaydi */
@media (min-width: 768px) {
  .container { display: flex; }
}

To'liq sintaksis quyidagicha: @media so'zi, ixtiyoriy media turi (screen/print/all), and bilan ulangan xususiyat(lar) qavs ichida:

@media screen and (min-width: 768px) { /* faqat ekranda, ≥768px */ }

Media turlari — qoida qaysi qurilma sinfiga tegishli:

Media turini ko'rsatmasangiz, all qo'llanadi. print — sahifa bosib chiqarilganda boshqacha ko'rinish berish uchun ishlatiladi (masalan, menyu va tugmalarni yashirish):

@media print {
  .navbar, .footer { display: none; }   /* bosmada keraksiz */
  body { color: #000; }
}

Asosiy xususiyatlar (media features):

hover/pointer — sensorli qurilmani sichqonchadan ajratadi; prefers-reduced-motion — harakatga sezgir foydalanuvchilar uchun animatsiyani o'chirishga yordam beradi (qulaylik/accessibility — 1.9):

/* Sensorli (barmoq): tugmalarni kattaroq qil */
@media (pointer: coarse) {
  .tugma { min-height: 44px; }
}

/* Animatsiyani kamaytirishni so'raganlar uchun o'chir */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

Mantiqiy operatorlar — shartlarni birlashtirish:

/* "va": faqat 768–1024px oralig'ida (planshet) */
@media (min-width: 768px) and (max-width: 1024px) {
  .panel { display: grid; }
}

/* "yoki" (vergul): kichik ekran YOKI tik holat */
@media (max-width: 600px), (orientation: portrait) {
  .yon-panel { display: none; }
}

2.4. Mobile-first — to'g'ri yondashuv

Ikki yondashuv bor:

• Mobile-first ( tavsiya): avval telefon uchun asosiy (base) stillar yozing, keyin min-width bilan kattaroq ekranlarga qo'shimcha bering.
• Desktop-first: avval kompyuter uchun yozing, keyin max-width bilan kichikroq ekranlarga tuzatish bering.

Nega mobile-first ustun (MDN/sanoat amaliyoti)? Chunki kamroq override (qayta yozish) bo'ladi: asosiy (mobil) stillar hamma joyda tabiiy ishlaydi, keyin faqat qo'shasiz:

/* 1) BASE — mobil (hech qanday media query'siz) */
.kartalar { display: grid; grid-template-columns: 1fr; gap: 1rem; }

/* 2) Planshet va undan keng — qo'shimcha */
@media (min-width: 768px) {
  .kartalar { grid-template-columns: 1fr 1fr; }
}

/* 3) Kompyuter va undan keng — yana qo'shimcha */
@media (min-width: 1024px) {
  .kartalar { grid-template-columns: repeat(3, 1fr); }
}

  Mobil (<768px)      Planshet (≥768px)     Kompyuter (≥1024px)
  ┌─────────┐         ┌─────┬─────┐         ┌───┬───┬───┐
  │  karta  │         │karta│karta│         │ k │ k │ k │
  ├─────────┤         ├─────┼─────┤         ├───┼───┼───┤
  │  karta  │         │karta│karta│         │ k │ k │ k │
  └─────────┘         └─────┴─────┘         └───┴───┴───┘

2.5. Breakpoint (sindiruv nuqtasi)

Breakpoint — layout o'zgaradigan ekran kengligi. Umumiy, keng tarqalgan qiymatlar (Bootstrap va sanoat amaliyotiga yaqin):

Maslahat: breakpoint'larni qurilma nomiga emas, kontentga qarab tanlang. "Bu yerda layout buzildi" shu yerga breakpoint qo'ying. Qurilmalar minglab xil; kontent esa aniq.

2.6. Egiluvchan media va birliklar (1.2–1.4 birlashadi)

Responsive — bu faqat media query emas; ko'pincha birliklarning o'zi moslashuvni beradi (1.2, 1.4):

img { max-width: 100%; height: auto; }   /* rasm konteynerdan oshmaydi */
.container { width: 100%; max-width: 1200px; margin: 0 auto; } /* 1.4 */
.galereya { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } /* 1.4 — media query'siz! */
h1 { font-size: clamp(1.5rem, 5vw, 3rem); } /* moslashuvchan shrift 2.7-bob */

2.7. clamp() — media query'siz moslashuvchan o'lcham

clamp(min, ideal, max) — qiymatni ekranga qarab ravon o'zgartiradi, lekin chegarada ushlaydi:

font-size: clamp(1.5rem, 5vw, 3rem);
/* eng kichik 1.5rem, ideal 5vw (ekranga nisbiy), eng katta 3rem */

Bu — "fluid typography" — media query'siz, ravon moslashuv. Zamonaviy va juda qulay.

2.8. Responsive rasmlar — srcset, sizes, <picture>

img { max-width: 100% } rasmni konteynerga sig'diradi, lekin brauzer baribir bitta (ko'pincha katta) faylni yuklaydi. Telefonga 2000px li rasmni yuborish — behuda trafik. Responsive rasm brauzerga bir nechta o'lcham taklif qiladi va u ekranga (va piksel zichligiga) mosini tanlaydi.

srcset + sizes — bir xil rasmning turli kengliklari:

<img
  src="rasm-800.jpg"
  srcset="rasm-400.jpg 400w, rasm-800.jpg 800w, rasm-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Tog' manzarasi">

• srcset — fayllar va ularning haqiqiy kengligi (400w = 400px keng).
• sizes — rasm qancha joy egallashini aytadi: ≤600px ekranda — to'liq en (100vw), aks holda yarmi (50vw).
• Brauzer shu ma'lumotga qarab eng mos faylni o'zi tanlaydi (Retina/DPR ni ham hisobga oladi).

<picture> — turli ekranga butunlay boshqa rasm (art direction) yoki yangi formatlar (webp/avif):

<picture>
  <source media="(max-width: 600px)" srcset="rasm-tik.jpg">     <!-- telefon: tik kadr -->
  <source srcset="rasm-keng.webp" type="image/webp">           <!-- zamonaviy format -->
  <img src="rasm-keng.jpg" alt="Mahsulot">                     <!-- zaxira (fallback) -->
</picture>

Brauzer <source> larni tartib bilan tekshiradi va birinchi mos kelganini ishlatadi; hech biri mos kelmasa — <img> ga tushadi. <img> har doim majburiy (zaxira va alt uchun).

2.9. Container queries — konteynerga qarab moslashuv (@container)

Media query butun viewportga qaraydi. Lekin ko'pincha komponentga o'zi joylashgan konteyner kengligi muhimroq: bir xil "karta" keng yon panelda boshqacha, tor panelda boshqacha ko'rinishi kerak. Container query (@container) — element o'z ota-konteyneri o'lchamiga qarab moslashadi (zamonaviy brauzerlarda qo'llab-quvvatlanadi):

/* 1) Konteynerni "so'rovga ochiq" deb belgilang */
.karta-konteyner {
  container-type: inline-size;     /* eni kuzatiladi */
}

/* 2) Konteyner eniga (viewport'ga emas!) qarab qoida */
@container (min-width: 400px) {
  .karta { display: grid; grid-template-columns: 120px 1fr; }
}

Bu — haqiqiy komponentga asoslangan responsive: bitta .karta qayerga qo'yilsa ham, o'sha joyning kengligiga moslashadi. Media query bilan birga ishlatiladi — biri sahifa darajasi, ikkinchisi komponent darajasi uchun.

3. Sintaksis — tez ma'lumotnoma

/* Viewport meta (HTML head'da — 2.2) MAJBURIY */
/* <meta name="viewport" content="width=device-width, initial-scale=1"> */

/* Mobile-first media query 2.4-bob */
@media (min-width: 768px) { /* planshet+ */ }
@media (min-width: 1024px) { /* kompyuter+ */ }

/* Boshqa shartlar va operatorlar 2.3-bob */
@media (max-width: 767px) { /* faqat kichik */ }
@media (orientation: landscape) { /* yotiq */ }
@media (min-width: 768px) and (max-width: 1024px) { /* "va": oraliq */ }
@media (max-width: 600px), (orientation: portrait) { /* "yoki": vergul */ }
@media (pointer: coarse) { /* sensorli — kattaroq tugma */ }
@media (prefers-color-scheme: dark) { /* qora rejim */ }
@media (prefers-reduced-motion: reduce) { /* animatsiyani o'chir */ }
@media print { /* bosma ko'rinish */ }

/* Media query'siz moslashuv (2.6–2.7) */
.grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
h1 { font-size: clamp(1.5rem, 5vw, 3rem); }
img { max-width: 100%; height: auto; }

/* Responsive rasm 2.8-bob */
/* <img srcset="r-400.jpg 400w, r-800.jpg 800w" sizes="(max-width:600px) 100vw, 50vw" src="r-800.jpg" alt=""> */

/* Container query 2.9-bob */
.qutilar { container-type: inline-size; }
@container (min-width: 400px) { .item { display: flex; } }

4. Batafsil kod namunalari

Misol 1 — Responsive karta to'ri (mobile-first)

/* BASE: mobil — bitta ustun 2.4-bob */
.kartalar {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1rem;
}

@media (min-width: 768px) {        /* planshet: 2 ustun */
  .kartalar { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
}

@media (min-width: 1024px) {       /* kompyuter: 3 ustun */
  .kartalar { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

Misol 2 — Responsive navbar (mobil: ustun; desktop: qator)

/* BASE: mobil — vertikal menyu */
.navbar { display: flex; flex-direction: column; gap: 0.5rem; }

@media (min-width: 768px) {         /* desktop: gorizontal */
  .navbar { flex-direction: row; justify-content: space-between; align-items: center; }
}

Misol 3 — Media query'siz responsive (eng zamonaviy)

/* Bu kod HECH QANDAY media query'siz hamma ekranga moslashadi (2.6–2.7) */
.galereya {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 1.4 */
  gap: 1rem;
}
.sarlavha { font-size: clamp(1.5rem, 5vw, 3.5rem); }  /* fluid 2.7-bob */
.container { width: min(90%, 1200px); margin: 0 auto; } /* min() — zamonaviy */

Misol 4 — Qora rejim (dark mode)

:root { --fon: #ffffff; --matn: #1a1a1a; }   /* kunduzgi (base) */

@media (prefers-color-scheme: dark) {          /* foydalanuvchi qora rejimda */
  :root { --fon: #1a1a1a; --matn: #f0f0f0; }
}

body { background: var(--fon); color: var(--matn); }  /* o'zgaruvchilar 1.2-bob */

5. To'g'ri va noto'g'ri holatlar

1) Viewport meta teg'ni unutish

<!--  telefonda hammasi kichik ko'rinadi, media query ishlamaydi 2.2-bob -->
<head><title>Sayt</title></head>

<!--  MAJBURIY -->
<head><meta name="viewport" content="width=device-width, initial-scale=1"></head>

2) Desktop-first (ko'p override)

/*  desktop'dan boshlab, hamma narsani max-width bilan "tuzatish" */
.box { display: flex; }
@media (max-width: 767px) { .box { display: block; } }

/*  mobile-first — kamroq override 2.4-bob */
.box { display: block; }
@media (min-width: 768px) { .box { display: flex; } }

3) Qat'iy px kenglik

/*  telefonda gorizontal skroll */
.container { width: 1200px; }

/*  moslashuvchan 1.4-bob */
.container { width: 100%; max-width: 1200px; }

4) Rasm konteynerdan oshib ketishi

/*  katta rasm layout'ni buzadi */
img { width: 800px; }

/*  konteynerga moslashadi 2.6-bob */
img { max-width: 100%; height: auto; }

6. Keng tarqalgan xatolar va yechimlari

Xato 1 — Media query ishlamayapti

Sababi: (a) viewport meta teg yo'q 2.2-bob; (b) <link> CSS noto'g'ri ulangan; (c) breakpoint mantiqi teskari. Yechimi: avval viewport teg'ni tekshiring; DevTools 0.5-bob "Responsive" rejimda (qurilma belgisi) ekranni kichraytirib ko'ring.

Xato 2 — Telefonda gorizontal skroll

Sababi: biror element ekrandan keng (qat'iy px, katta rasm, 100vw + padding). Yechimi: * { box-sizing: border-box } 1.2-bob; max-width: 100%; aybdor elementni DevTools'da toping.

Xato 3 — Breakpoint'da layout "sakraydi"

Sababi: breakpoint'lar bir-biriga mos kelmaydi yoki noto'g'ri joyda. Yechimi: breakpoint'ni kontent buzilgan joyga qo'ying 2.5-bob; mobile-first tartibda yozing.

Xato 4 — DevTools'da ishlaydi, real telefonda yo'q

Sababi: real qurilma piksel zichligi (DPR) farq qiladi yoki viewport teg yo'q. Yechimi: viewport teg + real qurilmada yoki to'g'ri DevTools emulyatsiyada sinang.

7. Integratsiya — bu mavzu stack'ning qayerida uchraydi

• Flexbox 1.3-bob va Grid 1.4-bob: responsive'ning poydevori; auto-fit/minmax media query'siz moslashuv.
• Birliklar 1.2-bob: %, rem, vw, clamp() — egiluvchanlik.
• Tailwind 1.7-bob: sm:, md:, lg: prefikslar — aynan media query'lar (mobile-first).
• SCSS 1.6-bob: breakpoint'larni mixin/o'zgaruvchi qilib markazlashtirish.
• SEO 13.8-bob: Google mobile-first indexing.
• React/Next (11, 13): komponentlar responsive bo'lishi; rasm optimizatsiya 13.10-bob.

8. Eng yaxshi amaliyotlar (best practices)

• Viewport meta teg'ni doim qo'ying — birinchi qadam 2.2-bob.
• Mobile-first yozing (min-width) — kamroq override, toza CSS 2.4-bob.
• Breakpoint'ni kontentga qarab tanlang, qurilma nomiga emas 2.5-bob.
• Imkon qadar media query'siz moslang — auto-fit/minmax, clamp(), % (2.6–2.7).
• img { max-width: 100% } — global qoida sifatida qo'ying.
• DevTools "Responsive" rejimida sinang, lekin real qurilmada ham tekshiring.
• Breakpoint'larni markazlashtir (CSS o'zgaruvchi/SCSS — 1.6) — bir xil qiymatlar.
• Kontent-do'st bo'l: tugma/havola telefonda barmoq bilan bosishli (~44px) bo'lsin.

9. Amaliy loyiha: "To'liq Responsive Landing Page"

1.1–1.4 bilan yasagan sahifangizni endi har qanday ekranga moslaysiz.

Maqsad

Mobile-first yondashuv, media queries va egiluvchan birliklarni birlashtirib, telefonplanshetkompyuterda mukammal ko'rinadigan landing page qurish.

Talablar (requirements)

1. Viewport meta teg to'g'ri qo'yilgan 2.2-bob.
2. Mobile-first CSS: base stillar mobil uchun, min-width bilan kengaytirish 2.4-bob.
3. Responsive navbar: mobilda vertikal (yoki "hamburger" tugma), desktop'da gorizontal (Misol 2).
4. Karta to'ri: mobil 1 ustun planshet 2 desktop 3 (Misol 1 yoki auto-fit — Misol 3).
5. Fluid tipografiya: kamida sarlavhada clamp() 2.7-bob.
6. Egiluvchan media: barcha rasmlar max-width: 100%.
7. Kamida 2 breakpoint (masalan 768px va 1024px).
8. (Bonus) Qora rejim prefers-color-scheme bilan (Misol 4).

Maslahatlar (hint)

• DevTools qurilma belgisi (Ctrl+Shift+M) turli ekran o'lchamlarida sinang.
• Base (mobil) stillarni media query'siz yozing; faqat qo'shimcha uchun @media (min-width: ...).
• repeat(auto-fit, minmax(250px, 1fr)) — kartalar uchun media query'ni almashtiradi.
• Breakpoint'larni kontent buzilgan joyga qo'ying — brauzerni sekin kichraytirib toping.
• Gorizontal skroll chiqsa — * { box-sizing: border-box } va aybdor elementni qidiring.

"Tayyor" mezonlari (acceptance criteria)

• Viewport meta teg bor.
• CSS mobile-first (min-width ishlatilgan, max-width emas).
• Navbar mobil va desktop'da har xil ko'rinadi.
• Kartalar: 1 2 3 ustun (ekranga qarab).
• Kamida bitta clamp() fluid o'lcham.
• Hech bir ekranda gorizontal skroll yo'q.
• Rasmlar konteynerdan oshmaydi.
• (Bonus) Qora rejim ishlaydi.

Yechim kodi ataylab berilmagan — bu loyihani o'zingiz yozib ko'ring.

10. Xulosa va keyingi bobga ko'prik

Bu bobda saytni har qanday ekranga moslashni — responsive dizaynni o'rgandik:

• Responsive = egiluvchan layout (1.3–1.4) + media queries + egiluvchan media.
• Viewport meta teg — birinchi, majburiy qadam (usiz hech narsa ishlamaydi).
• Media query ekranga qarab CSS beradi; mobile-first (min-width) — kamroq override, toza kod.
• Breakpoint'ni kontentga qarab tanlang; umumiy qiymatlar: 576/768/992/1200px.
• Xususiyatlar ko'p: width/height, orientation, aspect-ratio, resolution, hover/pointer, prefers-color-scheme, prefers-reduced-motion; operatorlar — and/vergul/not 2.3-bob.
• Media query'siz moslash: auto-fit/minmax 1.4-bob, clamp() (fluid typography), %/vw 1.2-bob.
• Responsive rasm (srcset/sizes/<picture>) — to'g'ri o'lcham yuklanadi 2.8-bob; @container — komponent o'z konteyneriga moslashadi 2.9-bob.

Keyingi bob — 1.6-bob: SCSS/Sass (o'zgaruvchilar, mixin, nesting, funksiyalar). Hozirgacha sof CSS yozdik; lekin katta loyihada CSS takrorlanuvchan va boshqarish qiyin bo'lib qoladi. SCSS — CSS ustiga o'zgaruvchi, nesting, mixin, funksiya qo'shib, uni kuchli dasturlash tilidek qiladi (responsive breakpoint'larni ham markazlashtiramiz).

Foydalanilgan rasmiy/ishonchli manbalar

• MDN Web Docs — Using media queries, Media query fundamentals, responsive design
• MDN Web Docs — media types (screen/print/all), logical operators (and/,/not)
• MDN Web Docs — prefers-color-scheme, prefers-reduced-motion, hover, pointer, aspect-ratio, resolution
• web.dev / MDN — mobile-first responsive layout, viewport meta
• MDN Web Docs — responsive images (srcset, sizes, <picture>)
• MDN Web Docs — CSS container queries (@container, container-type)
• MDN Web Docs — clamp(), min(), CSS values and units