5.3-dars: Moslashuvchanlik

Moslashuvchan dizayn nima

Moslashuvchan (yoki javob beruvchi) dizayn — bu sayt har qanday qurilmada: 4K-monitordan eski iPhone'gacha bir xil yaxshi ko'rinadigan yondashuv. "Mobil versiya" va "desktop versiya" degan narsa yo'q — ekran o'lchamiga moslashadigan bitta sayt bor.

Ilgari saytlar qat'iy kenglikda (masalan, 960px) qilinar edi. Agar bunday saytni telefonda ochsangiz — kontent o'ng chetdan chiqib ketadi, zoom qilib, gorizontal skroll qilishga to'g'ri keladi. Dahshat. Hozir bunday hech kim qilmaydi.

Moslashuvchan dizayn uchta asosga tayanadi:

• Moslashuvchan panjara — elementlar piksel emas, foizlardan foydalanadi
• Moslashuvchan rasmlar — rasmlar konteyner o'lchamiga moslashadi
• Media-so'rovlar — muayyan ekran kengligida ishga tushadigan CSS-qoidalar

/* Asosiy tamoyil: kontent ekranga moslashadi, aksincha emas */

/* Yomon: qat'iy kenglik */
.container {
  width: 960px; /* telefonda chiqib ketadi */
}

/* Yaxshi: moslashuvchan kenglik */
.container {
  max-width: 960px;
  width: 100%;
  padding: 0 16px;
}

Moslashuvchanlikning birinchi qoidasi: max-width yoki foizlardan foydalanish mumkin bo'lgan joyda hech qachon qat'iy kenglikdan foydalanmang. max-width: 960px + width: 100% quyidagini anglatadi: "konteyner kengligi 960px dan oshmaydi, lekin kichik ekranlarda — chekka bo'shliqlar bilan butun kenglikni egallaydi".

meta viewport tegi — mobil qurilmalar uchun eng muhimi

Bu tegsiz moslashuvchanlik umuman ishlamaydi. Siz mukammal media-so'rovlar yozishingiz mumkin, lekin telefonda sayt desktopning kichraytirilgan nusxasi sifatida ko'rsatiladi.

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

Bu teg nima qiladi:

• width=device-width — brauzerga aytadi: "qurilmaning haqiqiy kengligidan foydalan, 980px'ni o'ylab topma"
• initial-scale=1.0 — boshlang'ich masshtab 100% (zumsiz)

Bu tegsiz iPhone va Android sahifani 980px kenglikdagi desktopdagidek render qiladi va keyin masshtablaydi. Kontent mayda bo'lib ko'rinadi. Foydalanuvchi barmoqlari bilan zumlashga majbur bo'ladi. Bu teg bilan sahifa qurilmaning haqiqiy piksellaridan foydalanadi.

Bu teg har bir HTML-hujjatning <head> qismida bo'lishi shart. Agar uni unutsangiz — biz keyin muhokama qiladigan hamma narsa ma'nosini yo'qotadi.

@media (max-width: 768px) — burilish nuqtasi

@media (media-so'rovlar) — faqat muayyan shartlar bajarilganda qo'llaniladigan CSS-qoidalari. Ko'pincha — muayyan ekran kengligida.

/* Bazaviy stillar — barcha ekranlar uchun */
.grid {
  display: flex;
  gap: 20px;
}
.grid .item {
  flex: 1;
  background: #e94560;
  padding: 20px;
}

/* Ekran 768px yoki UNDAN KICHIK bo'lganda — bu stillar ishga tushadi */
@media (max-width: 768px) {
  .grid {
    flex-direction: column;
  }
  .grid .item {
    background: #10b981;
  }
}

max-width: 768px quyidagini anglatadi: "agar ekran kengligi 768px dan kichik yoki teng bo'lsa, bu stillarni qo'llash". Bu burilish nuqtasi (breakpoint) deb ataladi — unga yetganda maket qayta quriladi.

Brauzer oynasining kengligini o'zgartirib ko'ring. Quyida — 600px'dagi burilish nuqtasining namoyishi. Kenglik 600px'dan kichik bo'lganda, bloklar ustunga joylashadi va rangini o'zgartiradi:

Vebda foydalaniladigan standart burilish nuqtalari:

• 320px — eski smartfonlar
• 480px — zamonaviy smartfonlar
• 768px — planshetlar
• 1024px — kichik noutbuklar va landscape rejimidagi iPad
• 1280px — desktop

Ammo amalda muayyan qurilmalarga qarab ish tutmaslik kerak. Burilish nuqtalari kontent asosida belgilanishi kerak — maket qachon yomon ko'rina boshlashini kuzating va breakpoint'ni o'sha yerga qo'ying.

/* Mobile-first yondashuv: avval mobil qurilmalar uchun baza */
.grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Keyin planshetlar uchun yaxshilaymiz */
@media (min-width: 768px) {
  .grid {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .grid .item {
    flex: 1 1 calc(50% - 16px);
  }
}

/* Va desktop uchun */
@media (min-width: 1024px) {
  .grid .item {
    flex: 1;
  }
}

E'tibor bering: bu yerda max-width emas, min-width ishlatiladi. Bu Mobile-first yondashuv: standart stillar — mobil qurilmalar uchun, media-so'rovlar esa katta ekranlar uchun yaxshilanishlar qo'shadi. Bu aksincha qilishdan ko'ra soddaroq va tozaroq.

vw, vh, % — nisbiy o'lchov birliklari

Piksellar (px) — absolyut o'lchov birliklari. 100px — bu har qanday ekranda 100px. Moslashuvchanlik uchun bu yetarli emas. Ekran o'lchamiga moslashadigan nisbiy o'lchov birliklari kerak.

Asosiy nisbiy o'lchov birliklari:

• % — ota elementdan foiz. width: 50% — ota elementning yarim kengligi.
• vw — oyna kengligidan foiz. width: 50vw — brauzer oynasining yarmi.
• vh — oyna balandligidan foiz. height: 100vh — oynaning to'liq balandligi.
• em — ota elementning shrift o'lchamiga nisbatan. padding: 2em — ota elementning shrift o'lchami × 2.
• rem — ildiz shriftiga nisbatan (<html>). margin: 1.5rem — <html>dagi shrift o'lchami × 1.5.

Qayerda nimadan foydalanish kerak:

• % — ustunlar, kartochkalar, konteynerlar kengligi uchun
• vw — global bo'shliqlar, yirik sarlavhalar, to'liq kenglikdagi bo'limlar uchun
• vh — ekranning to'liq balandligidagi bo'limlar uchun (hero, to'liq ekran bloklari)
• rem — bo'shliqlar, matn o'lchamlari uchun (foydalanuvchi asosiy shrift o'lchamini o'zgartirsa qulay)
• em — shrift o'lchami bilan birga masshtablanishi kerak bo'lgan bo'shliqlar uchun

Klassik misol — ekranning to'liq balandligidagi bo'lim:

.hero {
  width: 100vw;   /* oynaning to'liq kengligiga */
  height: 100vh;  /* oynaning to'liq balandligiga */
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea, #764ba2);
}

Bu bo'lim qurilma o'lchamidan qat'i nazar, aynan butun ekranni egallaydi. Na qat'iy balandlik, na skroll — sof moslashuvchanlik.

Yana bir usul — clamp() orqali moslashuvchan matn. Bu qiymatlar diapazonini belgilaydigan CSS-funksiyasi:

/* font-size: 16px dan 32px gacha, oyna kengligiga proportsional */
h1 {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
}

/* padding: 16px dan 48px gacha */
.container {
  padding: clamp(1rem, 3vw, 3rem);
}

clamp(min, preferred, max) — minimal qiymat, xohlanuvchi (moslashuvchan), maksimal qiymat. Moslashuvchan sarlavhalar va bo'shliqlar uchun juda mos.

Amaliyot: telefonda vertikal bo'lib qoladigan menyu

Keling, to'liq moslashuvchan sahifa yasaymiz. Bizda desktopda gorizontal, mobilkada esa vertikal bo'ladigan menyu, hamda telefonda bitta ustunga aylanadigan kartochkalar panjarasi bo'ladi.

Mana to'liq kod. Nusxa oling, brauzerda oching va oyna kengligini o'zgartiring:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Moslashuvchan sayt</title>
<style>
  *, *::before, *::after {
    box-sizing: border-box;
  }
  body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    margin: 0;
    background: #f5f5f5;
    color: #333;
  }

  /* Header */
  .header {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    color: #fff;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .header .logo {
    font-size: 1.3em;
    font-weight: bold;
  }

  /* Navigatsiya */
  .nav {
    display: flex;
    gap: 4px;
  }
  .nav a {
    color: #ccc;
    text-decoration: none;
    padding: 8px 18px;
    border-radius: 6px;
    transition: background 0.2s, color 0.2s;
    font-size: 0.95em;
  }
  .nav a:hover {
    background: #533483;
    color: #fff;
  }
  .nav-toggle {
    display: none;
    background: none;
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9em;
  }

  /* Kontent */
  .content {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 24px;
  }
  .content h1 {
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    margin-bottom: 12px;
  }
  .content > p {
    color: #666;
    font-size: 1.05em;
    max-width: 600px;
    margin-bottom: 40px;
    line-height: 1.7;
  }

  /* Kartochkalar panjarasi */
  .card-grid {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
  }
  .card {
    background: #fff;
    border-radius: 14px;
    padding: 28px 24px;
    flex: 1 1 calc(33.333% - 14px);
    min-width: 240px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: transform 0.3s, box-shadow 0.3s;
  }
  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  }
  .card .icon {
    font-size: 2em;
    margin-bottom: 12px;
  }
  .card h3 {
    margin: 0 0 8px;
    font-size: 1.15em;
  }
  .card p {
    color: #777;
    font-size: 0.9em;
    line-height: 1.6;
    margin: 0;
  }

  /* Footer */
  .footer {
    text-align: center;
    padding: 30px 24px;
    color: #999;
    font-size: 0.85em;
    border-top: 1px solid #e0e0e0;
    margin-top: 40px;
  }

  /* Moslashuv: planshetlar */
  @media (max-width: 768px) {
    .card {
      flex: 1 1 calc(50% - 10px);
    }
  }

  /* Moslashuv: telefonlar */
  @media (max-width: 640px) {
    .nav {
      display: none;
      position: absolute;
      top: 60px;
      left: 0;
      width: 100%;
      background: #1a1a2e;
      flex-direction: column;
      padding: 12px;
      border-top: 1px solid #2a2a4a;
    }
    .nav.open {
      display: flex;
    }
    .nav a {
      display: block;
      padding: 14px 16px;
      border-bottom: 1px solid #2a2a4a;
      border-radius: 0;
    }
    .nav a:last-child {
      border-bottom: none;
    }
    .nav-toggle {
      display: block;
    }
    .card {
      flex: 1 1 100%;
    }
    .header {
      position: relative;
    }
  }
</style>
</head>
<body>

  <header class="header">
    <div class="logo">🌟 MySite</div>
    <button class="nav-toggle" onclick="this.nextElementSibling.classList.toggle('open')">☰ Menyu</button>
    <nav class="nav">
      <a href="#">Bosh sahifa</a>
      <a href="#">Biz haqimizda</a>
      <a href="#">Xizmatlar</a>
      <a href="#">Blog</a>
      <a href="#">Aloqa</a>
    </nav>
  </header>

  <main class="content">
    <h1>Moslashuvchan dizayn — bu oddiy</h1>
    <p>
      Brauzer oynasini torayting — menyu vertikalga aylanadi, kartochkalar
      esa bitta ustunga joylashadi. Desktopda ular uchta ustunda,
      planshetda — ikkita, telefonda esa bir-birining ostida joylashadi.
    </p>

    <div class="card-grid">
      <div class="card">
        <div class="icon">📱</div>
        <h3>Mobile-first</h3>
        <p>Avval mobil qurilmalar uchun loyihalashtiramiz, keyin katta ekranlar uchun yaxshilanishlar qo'shamiz.</p>
      </div>
      <div class="card">
        <div class="icon">📐</div>
        <h3>Moslashuvchan panjara</h3>
        <p>Elementlar qat'iy piksellar o'rniga foizlar, flexbox va nisbiy o'lchov birliklaridan foydalanadi.</p>
      </div>
      <div class="card">
        <div class="icon">📏</div>
        <h3>Media-so'rovlar</h3>
        <p>Muayyan ekran kengligida ishga tushadigan va maketni qayta quradigan CSS-qoidalari.</p>
      </div>
      <div class="card">
        <div class="icon">🖼️</div>
        <h3>Moslashuvchan rasmlar</h3>
        <p>Rasmlar konteynerdan chiqib ketmasligi uchun max-width: 100% yordamida masshtablanadi.</p>
      </div>
      <div class="card">
        <div class="icon">🔤</div>
        <h3>Nisbiy o'lchov birliklari</h3>
        <p>vw, vh, %, rem, em — ekran va shrift o'lchamiga moslashadigan birliklar.</p>
      </div>
      <div class="card">
        <div class="icon">🎯</div>
        <h3>Burilish nuqtalari</h3>
        <p>640px, 768px, 1024px'dagi breakpointlar — maket qayta quriladigan standart chegaralar.</p>
      </div>
    </div>
  </main>

  <footer class="footer">
    © 2026 MySite. Barcha qurilmalarda ishlaydi.
  </footer>

  <script>
    // Havolaga bosilganda menyuni yopish
    document.querySelectorAll('.nav a').forEach(link => {
      link.addEventListener('click', () => {
        document.querySelector('.nav').classList.remove('open');
      });
    });
  </script>
</body>
</html>

Keling, bu misolda moslashuvchanlik qanday ishlashini ko'rib chiqamiz:

1. meta viewport — head ichidagi birinchi qator. Usiz hech narsa ishlamaydi.

2. Mobile-first menyu:

• Desktopda (640px'dan keng) — .nav — display: flex, havolalar qatorda joylashadi.
• Telefonda (640px'dan tor) — @media (max-width: 640px) .navni yashiradi (display: none), .nav-toggle tugmasi esa ko'rinadigan bo'ladi (display: block). Tugmani bosganda (onclick) .open klassi qo'shiladi va menyu vertikal ro'yxat sifatida ko'rsatiladi.

3. Kartochkalarning moslashuvchan panjarasi:

• Standart bo'yicha (desktop) — flex: 1 1 calc(33.333% - 14px), qatorda uchtadan.
• Planshetda (≤768px) — flex: 1 1 calc(50% - 10px), qatorda ikkitadan.
• Telefonda (≤640px) — flex: 1 1 100%, bitta ustun.

4. Moslashuvchan konteyner:

• max-width: 1100px + avtomatik chekka bo'shliqlar — konteyner 1100px dan kengroq bo'lmaydi, lekin kichik ekranlarda padding bilan butun kenglikni egallaydi.

5. Moslashuvchan sarlavha:

• font-size: clamp(1.8rem, 4vw, 2.5rem) — oyna kengligiga qarab 1.8rem dan 2.5rem gacha.

Mana yana bir nechta foydali moslashuvchanlik usullari:

/* 1. Moslashuvchan rasm */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 2. Moslashuvchan bo'shliqlar */
.container {
  padding: clamp(1rem, 3vw, 2rem);
}

/* 3. Elementlarni mobilkada yashirish */
.desktop-only { display: block; }
.mobile-only { display: none; }

@media (max-width: 640px) {
  .desktop-only { display: none; }
  .mobile-only { display: block; }
}

/* 4. Moslashuvchan matn */
p {
  font-size: clamp(0.95rem, 2vw, 1.1rem);
}

/* 5. Media-so'rovlarsiz panjara (auto-fill) */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
}

Oxirgi usul — auto-fill — ayniqsa ajoyib. U minimal 280px kenglikda sig'adigan miqdorda ustunlarni avtomatik yaratadi. Media-so'rovlar shart emas — panjara o'zi moslashadi.

Keling, xulosa qilaylik. Mana moslashuvchanlik bo'yicha shpargalka:

/* MOSLASHUVCHANLIK — SHPARGALKA */

/* 1. Har doim head ichida */
<meta name="viewport" content="width=device-width, initial-scale=1.0">

/* 2. Moslashuvchan konteyner */
.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
}

/* 3. Moslashuvchan rasmlar */
img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* 4. Mobile-first media-so'rovlar */
/* Baza — mobil qurilmalar uchun */
.card { flex: 1 1 100%; }

/* Planshet */
@media (min-width: 768px) {
  .card { flex: 1 1 calc(50% - 10px); }
}

/* Desktop */
@media (min-width: 1024px) {
  .card { flex: 1 1 calc(33.333% - 14px); }
}

/* 5. Nisbiy o'lchov birliklari */
width: 100%;           /* ota elementdan */
height: 100vh;         /* butun ekranga */
font-size: clamp(1rem, 3vw, 2rem); /* moslashuvchan matn */
padding: 2rem;         /* ildiz shriftidan */

/* 6. Burilish nuqtalari (kontent bo'yicha!) */
/* 640px — telefonlar */
/* 768px — planshetlar */
/* 1024px — desktop */

Eslab qolish kerak bo'lgan asosiy narsalar:

• <meta name="viewport"> — moslashuvchanlik uchun majburiy
• Mobile-first: avval telefon uchun stillar, keyin katta ekranlar uchun
• Media-so'rovlar — maketni ekran o'lchamiga moslab qayta quradi
• Nisbiy o'lchov birliklari (%, vw, vh, rem) — ekranga moslashadi
• Burilish nuqtalari kontent yomon ko'rina boshlagan joyga qo'yiladi
• Rasmlarda max-width: 100% — ular ota elementdan chiqib ketmasligi uchun
• clamp() — moslashuvchan o'lchamlar uchun qulay funksiya

Moslashuvchanlik — bu na sehr, na murakkab narsa. Bu shunchaki moslashuvchan stillar yozish odatidir. meta viewport'dan boshlang va qat'iy kenglik o'rniga max-width'dan foydalaning — va siz har qanday qurilmada bir xil yaxshi ko'rinadigan saytga yarim yo'lni bosib o'tasiz.

Tabriklayman! Siz 4- va 5-modullarni tugatdingiz. Endi siz blok modeli, flexbox, pozitsionerlash, animatsiyalar va moslashuvchanlik bilan ishlashni bilasiz. Bu zamonaviy CSS'ning asosidir. Keyingi modullarda biz JavaScript'ga o'tamiz — va u yerda bu bilimlar har kuni kerak bo'ladi.