# Responsiv dizayn (media queries) + birinchi loyiha

> Responsiv dizayn: media query, viewport va mobile-first yondashuv. Telefon va kompyuterga moslashadigan to'liq sahifa loyihasi bosqichma-bosqich.

Manba: https://learncode.uz/html-css/responsiv-dizayn/
Sana: 2026-05-23

Bo'lim davomida sahifa qurishning barcha qismlarini o'rgandik. Bitta masala
qoldi: sayt **telefon**da ham, **kompyuter**da ham yaxshi ko'rinishi kerak.
Bugungi kunda tashriflarning yarmidan ko'pi telefondan keladi, shuning uchun
bu masala ixtiyoriy emas.

Bu darsda responsiv dizaynni ko'ramiz va bo'lim yakunida to'liq sahifa quramiz.

Bu dars yakunida viewport va media query munosabatini tushuntirasiz,
mobile-first breakpointlarni mazmunga qarab tanlaysiz, moslashuvchan o'lcham
va layout qurasiz hamda DevTools qurilma rejimida sahifani tekshirasiz.

## Viewport — birinchi qadam

Har responsiv sahifa `<head>` ichidagi shu qatordan boshlanadi:

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

Bu qator bo'lmasa, mobil brauzer odatda taxminan 980px lik **layout viewport**
bilan sahifani chizib, keyin uni kichraytiradi. Media querylar yo'qolmaydi,
ammo ular qurilmaning kutilgan CSS kengligi o'rniga shu keng viewportga qarab
baholanadi va sahifa juda mayda ko'rinishi mumkin.

> **Diqqat**
>
> Viewport qatori responsive layoutni qurilma kengligiga mos CSS piksellarda
> hisoblashga yordam beradi. Uni `<head>` ichida yozing; bu media queryning
> o'zini yoqib-o'chirmaydi, balki mobil layout viewportini to'g'ri sozlaydi.

## Media query

**Media query** — CSS qoidalarini faqat ma'lum shartda qo'llash usuli:

```css
/* Barcha o'lchamlarda */
.karta {
  width: 100%;
}

/* Faqat 768px dan keng ekranlarda */
@media (min-width: 768px) {
  .karta {
    width: 50%;
  }
}
```

> **Atama**
>
> **Media query** — `@media` bilan boshlanadigan CSS bloki. Ichidagi qoidalar
> faqat shart bajarilgandagina qo'llanadi. Eng ko'p ishlatiladigan shart —
> ekran kengligi (`min-width` yoki `max-width`).

## Mobile-first yondashuv

Media query yozishning ikki yo'li bor va ular teng emas:

| Yondashuv | Boshlanish | Media query |
|-----------|------------|-------------|
| Mobile-first | Telefon uchun yoziladi | `min-width` — kattaga qarab |
| Desktop-first | Kompyuter uchun yoziladi | `max-width` — kichikka qarab |

Ko'p loyihada **mobile-first** amaliy tanlov. Sababi: telefon uchun dizayn
soddaroq bo'ladi, undan kattaga o'tish esa qo'shimcha imkoniyat qo'shishdan
iborat. Bu yagona to'g'ri usul emas; mavjud desktop tizimini qo'llab-quvvatlash
kabi holatda desktop-first ham asosli bo'lishi mumkin.

<Callout type="tip" title="Yodda tuting">
Keng tarqalgan chegara nuqtalari:

```css
@media (min-width: 640px)  { }  /* katta telefon */
@media (min-width: 768px)  { }  /* planshet */
@media (min-width: 1024px) { }  /* kompyuter */
```

Bu sonlar qat'iy qoida emas — dizayningiz buzilgan joyda chegara qo'ying.
</Callout>

## Amalda ko'rish

Quyidagi misolda kartochkalar tor ekranda ustma-ust, keng ekranda yonma-yon
turadi. Natijani brauzer DevTools qurilma rejimida turli viewport kengligida
tekshirib ko'ring:

```html
<div class="kartalar">
    <div class="karta">Birinchi</div>
    <div class="karta">Ikkinchi</div>
    <div class="karta">Uchinchi</div>
  </div>
```

```css
.kartalar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-family: sans-serif;
  }
  .karta {
    background: #2563eb;
    color: white;
    padding: 20px;
    border-radius: 6px;
    text-align: center;
  }

  @media (min-width: 600px) {
    .kartalar {
      flex-direction: row;
    }
    .karta {
      flex: 1;
    }
  }
```

Bitta media query yetarli bo'ldi: `flex-direction` ni `column` dan `row` ga
almashtirish.

## Media querysiz moslashish

Har o'zgarish uchun breakpoint shart emas. Flex wrap, foiz, `max-width` va
`clamp()` mavjud joyga ravon moslasha oladi:

```html
<section class="hero">
  <h1>Moslashuvchan o'lcham</h1>
  <p>Sarlavha viewportga qarab ravon o'sadi, tugmalar esa sig'masa yangi qatorga o'tadi.</p>
  <div class="actions">
    <a href="#">Darsni boshlash</a>
    <a href="#">Rejani ko'rish</a>
  </div>
</section>
```

```css
.hero { max-width: 680px; margin: auto; padding: 16px; }
.hero h1 { font-size: clamp(1.8rem, 5vw, 3.4rem); }
.hero p { line-height: 1.7; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.actions a {
  flex: 1 1 150px;
  padding: 10px;
  background: #4338ca;
  color: white;
  text-align: center;
}
```

[Grid darsidagi](https://learncode.uz/html-css/grid) `auto-fit + minmax()` ham media querysiz
ustun sonini moslashtiradi. Rasmlar uchun esa quyidagi qoida foydali:

```css
img {
  max-width: 100%;
  height: auto;
}
```

Bu ikki qator rasmning konteynerdan chiqib ketishiga yo'l qo'ymaydi.

## Birinchi loyiha

Endi bo'lim davomida o'rganganlarimizni birlashtiramiz. Quyida sahifaning
`body` ichiga qo'yiladigan to'liq **mazmun fragmenti** —
[semantik teglar](https://learncode.uz/html-css/semantik-teglar),
[Flexbox](https://learncode.uz/html-css/flexbox), [Grid](https://learncode.uz/html-css/grid),
[pozitsiya](https://learncode.uz/html-css/pozitsiya) va media query birga ishlatilgan:

```html
<header class="bosh">
    <div class="logo">Mening saytim</div>
    <nav class="menyu">
      <a href="#">Bosh</a>
      <a href="#">Xizmatlar</a>
      <a href="#">Aloqa</a>
    </nav>
  </header>

  <main>
    <section class="banner">
      <h1>Salom, dunyo!</h1>
      <p>Bu — HTML va CSS bilan qurilgan birinchi sahifam.</p>
    </section>

    <section class="xizmatlar">
      <article class="karta">
        <div class="belgi">YANGI</div>
        <h2>Birinchi</h2>
        <p>Qisqa tavsif matni shu yerda turadi.</p>
      </article>
      <article class="karta">
        <h2>Ikkinchi</h2>
        <p>Qisqa tavsif matni shu yerda turadi.</p>
      </article>
      <article class="karta">
        <h2>Uchinchi</h2>
        <p>Qisqa tavsif matni shu yerda turadi.</p>
      </article>
    </section>
  </main>

  <footer class="past">
    <p>&copy; 2026 Mening saytim</p>
  </footer>
```

```css
* { box-sizing: border-box; }
  body {
    margin: 0;
    font-family: sans-serif;
    color: #1e293b;
  }

  /* Sarlavha — Flexbox */
  .bosh {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    background: #1e293b;
    padding: 14px;
  }
  .logo { color: white; font-weight: bold; font-size: 18px; }
  .menyu { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
  .menyu a { color: #cbd5e1; text-decoration: none; font-size: 14px; }
  .menyu a:hover { color: white; }
  .menyu a:focus-visible { outline: 3px solid #38bdf8; outline-offset: 3px; }

  /* Banner */
  .banner {
    background: #2563eb;
    color: white;
    padding: 30px 16px;
    text-align: center;
  }
  .banner h1 { margin: 0 0 8px; font-size: 22px; }
  .banner p { margin: 0; opacity: 0.9; font-size: 14px; }

  /* Kartochkalar — Grid */
  .xizmatlar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
  }
  .karta {
    position: relative;
    background: #f1f5f9;
    border-radius: 8px;
    padding: 16px;
  }
  .karta h2 { margin: 0 0 6px; font-size: 16px; }
  .karta p { margin: 0; font-size: 14px; color: #475569; }

  /* Yorliq — absolute */
  .belgi {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ef4444;
    color: white;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
  }

  .past {
    background: #1e293b;
    color: #94a3b8;
    text-align: center;
    padding: 14px;
    font-size: 13px;
  }
  .past p { margin: 0; }

  /* Kengroq ekran uchun */
  @media (min-width: 700px) {
    .bosh { flex-direction: row; justify-content: space-between; }
    .banner { padding: 50px 20px; }
    .banner h1 { font-size: 30px; }
    .xizmatlar { grid-template-columns: repeat(3, 1fr); }
  }
```

Sahifani DevTools qurilma rejimida toraytirib-kengaytiring: header tik
joylashuvdan gorizontal holatga o'tadi, kartochkalar bir ustundan uchtaga
bo'linadi. Kodni mustaqil faylga ko'chirganda oldingi darsdagi to'liq HTML
skeleti va viewport metasini ham qo'shing.

> **Mustaqil ish**
>
> Yuqoridagi kodni `index.html` va `style.css` fayllariga ko'chirib, o'zingiz
> o'zgartiring:
>
> 1. Ranglarni o'zingizga yoqqanicha almashtiring.
> 2. To'rtinchi kartochka qo'shing.
> 3. Kartochkalarga mazmunli `alt`, `width` va `height` bilan rasm qo'shing;
>    CSS'da `max-width: 100%` va `height: auto` ishlating.
> 4. Pastki qismga [havolalar](https://learncode.uz/html-css/havola-rasm) qo'shing.
> 5. Chegara nuqtasini 700px dan 900px ga o'zgartirib, farqni kuzating.
>
> `<head>` ichiga viewport qatorini yozishni unutmang.

## Qisqacha xulosa

- Responsiv sahifa **viewport** meta qatoridan boshlanadi.
- **Media query** — qoidalarni faqat ma'lum ekran o'lchamida qo'llash.
- **Mobile-first** ko'p yangi loyihada qulay: `min-width` bilan kattaga qarab boring.
- Grid'ning `auto-fit` usuli media query'siz ham moslashadi.
- Rasmlarga `max-width: 100%; height: auto` bering.
- Chegara nuqtasini qurilma nomiga emas, dizayn buzilgan joyga qo'ying.

## Keyingi qadam

Endi siz sahifa tuzilishini qura olasiz, uni stillaysiz, elementlarni
Flexbox va Grid bilan joylashtirasiz hamda turli ekranlarga moslaysiz. Bu
bilimlarni alohida misollardan bitta haqiqiy sahifaga ko'chirish vaqti keldi.

Keyingi darsdagi [responsive portfolio amaliy loyihasida](https://learncode.uz/html-css/css-amaliy-loyiha)
HTML semantikasi, box model, Flexbox, Grid, position va media query'ni birga
ishlatasiz. So'ng cheatsheet va quiz orqali qaysi mavzularni yana
mustahkamlash kerakligini aniqlaysiz.