Responsive Design — Mobile First kontseptsiyasi

~10 daq · CSS · Pozitsiya va Responsive

Muammodan boshlaylik

Siz saytni kompyuterda yasadingiz: uch ustun, katta rasmlar, keng menyu. Chiroyli. Keyin telefonda ochasiz:

• Hamma narsa mitti — sahifa butunligicha kichraytirilgan, o'qish uchun barmoq bilan kattalashtirish kerak
• Yoki sahifa ekrandan chiqib ketgan — chapga-o'ngga suriladi
• Menyu havolalari bir-birining ustiga tushgan, barmoq bilan bosib bo'lmaydi

O'zbekistonda veb-trafikning katta qismi — telefonlardan. Telefonda yomon ko'rinadigan sayt — foydalanuvchilarning ko'pchiligi uchun yomon sayt. Va Google ham saytlarni birinchi navbatda mobil versiyasi bo'yicha baholaydi (mobile-first indexing).

Responsive design nima

Responsive (moslashuvchan) dizayn — bitta sayt, bitta HTML, har qanday ekranga moslashadi: telefon, planshet, noutbuk, katta monitor. Alohida m.sayt.uz mobil versiyasi emas.

Uch asosiy tarkibiy qism:

1. Viewport meta tegi — brauzerga "sahifani kichraytirma"
2. Moslashuvchan layout — Flexbox, Grid, %, fr, minmax (3–4-bo'limlar)
3. Media query lar — ekran o'lchamiga qarab stil o'zgartirish (26-dars)

Va qo'shimcha: moslashuvchan rasmlar va shriftlar (27-dars).

1. Viewport meta tegi — majburiy

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

Busiz telefon brauzeri sahifani 980px kenglikdagi kompyuter ekrani deb hisoblaydi va uni butunligicha kichraytirib ko'rsatadi — darsning boshidagi "hamma narsa mitti" muammosi. Bu teg aytadi: "sahifa kengligi — qurilma ekranining haqiqiy kengligi".

Har bir HTML sahifaning <head> ida bo'lishi shart. Vite, Next.js va boshqa vositalar uni shablonga o'zi qo'shadi.

[!WARNING] maximum-scale=1 yoki user-scalable=no qo'shmang. Ular foydalanuvchiga sahifani barmoq bilan kattalashtirishni taqiqlaydi — ko'rish qobiliyati past odamlar uchun sayt foydalanib bo'lmaydigan bo'lib qoladi.

2. Moslashuvchan asos

Oldingi darslardagi vositalarning ko'pi o'zi responsive:

img,
video {
  max-width: 100%;      /* konteynerdan kengroq bo'lmasin (11-dars) */
  height: auto;         /* nisbat saqlansin */
}

.container {
  width: 100%;
  max-width: 1200px;    /* katta ekranda cho'zilib ketmasin */
  margin-inline: auto;  /* markazda */
  padding-inline: 16px; /* telefonda chetga yopishmasin */
}

.products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));   /* 22-dars */
  gap: 24px;
}

Bu kod media query siz telefondan katta monitorgacha yaxshi ishlaydi. Qoida: avval o'zi moslashadigan layout yozing, media query ni faqat haqiqatan kerak bo'lgan joyda qo'shing.

3. Mobile First

Responsive saytni ikki yo'nalishda yozish mumkin:

Desktop First — avval kompyuter uchun, keyin kichik ekranlar uchun olib tashlash:

.cards { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cards { grid-template-columns: 1fr; } }

Mobile First — avval telefon uchun (eng oddiy), keyin katta ekranlar uchun qo'shish:

.cards { display: grid; gap: 16px; }       /* telefon: bitta ustun — standart */

@media (min-width: 600px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .cards { grid-template-columns: repeat(3, 1fr); } }

Nima uchun Mobile First yaxshiroq

1. Kamroq kod. Telefon layouti odatda oddiy: bitta ustun, ustma-ust. Bu — brauzerning standart xatti-harakati (blok elementlar ustma-ust). Mobile First da telefon uchun deyarli hech narsa yozmaysiz. Desktop First da esa kompyuter layoutini telefon uchun bekor qilish kerak: float: none, width: auto, display: block — ortiqcha kod.

2. Prioritetlar. Kichik ekran sizni "eng muhim nima?" deb o'ylashga majbur qiladi. Avval asosiy kontent va funksiya, keyin katta ekranda qo'shimchalar (sidebar, qo'shimcha ma'lumot). Teskarisi — kompyuterdagi hamma narsani telefonga "tiqishga" urinish.

3. Tezlik. Telefon — ko'pincha sekinroq protsessor va mobil internet. U minimal CSS ni o'qiydi; katta ekranlar uchun qoidalar unga tegishli emas.

Mobil foydalanish qulayligi

Responsive — faqat layout emas:

@media (hover: hover) {
  .card:hover { transform: translateY(-4px); }   /* faqat sichqonchali qurilmalarda */
}

Sinash

• DevTools → Device Toolbar (Ctrl+Shift+M): turli telefonlar, istalgan kenglik, aylantirish
• Kenglikni sekin torayting va layout qayerda buzilishini kuzating — breakpoint lar o'sha joylarda bo'lishi kerak (26-dars)
• Haqiqiy telefonda ham sinang: barmoq bilan bosish, haqiqiy shrift o'lchami, sekin internet — emulyatorda sezilmaydi
• Eng tor holat — 320px (eski va kichik telefonlar)

Nima uchun shunday?

Nima uchun telefon va kompyuter uchun alohida saytlar (m.sayt.uz) o'rniga bitta responsive sayt?

Alohida versiyalar ikki baravar ish: ikki xil kod, ikki xil xato, va har bir yangi funksiya ikki marta. Qurilmalar esa ikkita emas — minglab: kichik telefon, katta telefon, buklanadigan telefon, planshet, noutbuk, televizor. "Mobil" va "desktop" chegarasi yo'qolib ketgan. Bitta sayt, ekran o'lchamiga moslashadigan — har qanday mavjud va kelajakdagi qurilma uchun ishlaydi. Bundan tashqari, bitta URL — ulashish oson, va Google uchun ham bitta sahifa (alohida mobil versiyalar dublikat kontent muammosini keltirib chiqaradi).

Xulosa

Eslab qoling:

• Responsive — bitta sayt, har qanday ekranga moslashadi
• <meta name="viewport" content="width=device-width, initial-scale=1"> — majburiy; zoom ni taqiqlamang
• Asos: img { max-width: 100% }, max-width + margin-inline: auto, Grid auto-fill
• Mobile First — avval telefon (oddiy), keyin min-width bilan qo'shish
• Kamroq kod, aniq prioritetlar, telefon uchun tezroq
• Bosish maydoni ≥ 44px, shrift ≥ 16px, gorizontal scroll yo'q
• @media (hover: hover) — hover effektlar faqat sichqonchali qurilmalarda
• DevTools Device Toolbar + haqiqiy telefon

Keyingi dars

26-dars: Media Queries — min-width, max-width, orientation