Responsiv dizayn (media queries) + birinchi loyiha

Bo’lim davomida sahifa qurishning barcha qismlarini o’rgandik. Bitta masala qoldi: sayt telefonda ham, kompyuterda 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:

<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.

Media query

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

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

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

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.

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:

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

<style>
.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;
  }
}
</style>
Natija

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:

Kod
<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>

<style>
.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;
}
</style>
Natija

Grid darsidagi auto-fit + minmax() ham media querysiz ustun sonini moslashtiradi. Rasmlar uchun esa quyidagi qoida foydali:

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, Flexbox, Grid, pozitsiya va media query birga ishlatilgan:

Kod
<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>

<style>
* { 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); }
}
</style>
Natija

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.

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 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.

Bu dars foydali bo'ldimi?

—
— marta ko'rildi