CSS

Responsive dizayn

Responsive dizayn (moslashuvchan dizayn) — saytning telefon, planshet va kompyuterning turli ekran o'lchamlarida bir xil chiroyli va qulay ko'rinishini ta'minlash usuli. Bugungi kunda internet trafikning katta qismi telefonlardan keladi, shuning uchun sayt har qanday ekranga moslashishi — majburiy talab. Bu darsda saytni moslashuvchan qilishning barcha asosiy vositalarini o'rganamiz.

Responsive dizaynning uch ustuni: moslashuvchan birliklar (px o'rniga %, rem, vw), media query'lar (ekran o'lchamiga qarab uslubni o'zgartirish) va moslashuvchan rasmlar. Bularni birga ishlatib, bitta kod bilan barcha qurilmalarga xizmat qilasiz.

Nega px yetarli emas?

px (piksel) — qat'iy (fixed) birlik. Agar butun saytni piksellar bilan qursangiz (masalan, width: 960px), u telefon ekranida (kengligi ~360px) sig'may qoladi va foydalanuvchi gorizontal aylantirishga majbur bo'ladi. Shuning uchun moslashuvchan birliklar kerak.

CSS birliklari

Bir necha muhim birlik bor. Ularni to'g'ri tanlash — responsive dizaynning yarmini hal qiladi:

px — piksel (mutlaq)

Qat'iy o'lcham. Chegara qalinligi (border) yoki juda aniq bo'lishi kerak bo'lgan kichik o'lchamlar uchun mos. Katta joylashuvlar uchun tavsiya etilmaydi.

% — foiz (nisbiy)

Ota elementga nisbatan o'lcham. width: 50% — ota elementning yarmi kengligi. Ota o'zgarsa, farzand ham moslashadi. Moslashuvchan kengliklar uchun juda foydali.

.yon-panel {
  width: 30%;
}
.asosiy {
  width: 70%;
}

em — ota shriftga nisbatan

1em = ota elementning shrift o'lchami. Agar ota shrifti 16px bo'lsa, 2em = 32px. Muammosi: em'lar bir-birining ichida ko'payib ketishi mumkin (ichma-ich elementlarda).

rem — ildiz shriftga nisbatan (eng tavsiya etiladigan)

rem (root em) har doim ildiz elementga (<html>) nisbatan hisoblanadi. Standart holatda html shrifti 16px, demak 1rem = 16px, 1.5rem = 24px. em'ning ko'payib ketish muammosi rem'da yo'q, shuning uchun rem — o'lcham va masofalar uchun eng ishonchli tanlov.

html {
  font-size: 16px;   /* 1rem = 16px */
}

h1 {
  font-size: 2rem;   /* 32px */
}
.karta {
  padding: 1.5rem;   /* 24px */
}

Amaliy maslahat: shriftlar va masofalar (padding, margin) uchun remni asosiy birlik qiling. Foydalanuvchi brauzer sozlamasida shrift o'lchamini kattalashtirsa, butun sayt (rem'ga asoslangani uchun) mutanosib ravishda kattalashadi — bu qulaylik uchun juda muhim.

vw va vh — ekran o'lchamiga nisbatan

vw (viewport width) — ekran kengligining 1%'i; vh (viewport height) — ekran balandligining 1%'i. 100vw = butun ekran kengligi, 100vh = butun ekran balandligi. To'liq ekranli bo'limlar (hero section) uchun juda qulay:

.hero {
  width: 100vw;
  height: 100vh;   /* butun ekranni egallaydi */
}

Viewport meta tegi — birinchi qadam

Responsive sayt yaratishning eng birinchi va majburiy qadami — HTML'ning <head> qismiga viewport meta tegini qo'yish. Usiz media query'lar telefonda to'g'ri ishlamaydi:

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

Bu qatorni unutmang! U bo'lmasa, telefon saytni kompyuter kengligida ko'rsatib, keyin kichraytiradi — natijada matn juda mayda bo'lib qoladi va media query'lar ishlamaydi. Bu — boshlang'ich dasturchilarning eng ko'p qiladigan xatosi.

Media query — @media

Media query — ekran o'lchamiga (yoki boshqa shartga) qarab turli CSS qoidalarini qo'llash imkonini beradi. U @media bilan boshlanadi va ichida shart hamda odatiy CSS qoidalari bo'ladi:

/* Ekran kengligi 600px yoki undan kichik bo'lsa */
@media (max-width: 600px) {
  .konteyner {
    flex-direction: column;
  }
  h1 {
    font-size: 1.5rem;
  }
}

Bu shunday ishlaydi: ekran 600px'dan keng bo'lsa, ichkaridagi qoidalar e'tiborga olinmaydi; ekran 600px yoki tor bo'lsa, ular qo'llaniladi. Shu tarzda telefonda joylashuvni gorizontaldan vertikalga o'zgartirasiz.

max-width: 600px — ekran shu qiymat yoki undan tor bo'lganda;
min-width: 600px — ekran shu qiymat yoki undan keng bo'lganda.

Mobile-first yondashuv

Ikki xil yondashuv bor: desktop-first (avval katta ekran, keyin max-width bilan kichraytirish) va mobile-first (avval telefon, keyin min-width bilan kattalashtirish). Zamonaviy amaliyot — mobile-first.

Mobile-first'da asosiy CSS'ni eng kichik (telefon) ekran uchun yozasiz, so'ng min-width media query'lari bilan kattaroq ekranlarga qo'shimchalar qo'shasiz:

/* Asosiy uslub — telefon uchun (mobile-first) */
.karta {
  width: 100%;
}

/* Planshet: 768px va undan keng */
@media (min-width: 768px) {
  .karta {
    width: 50%;
  }
}

/* Kompyuter: 1024px va undan keng */
@media (min-width: 1024px) {
  .karta {
    width: 33.33%;
  }
}

Mobile-first afzalliklari: telefonlar ko'pchilikda, shuning uchun asosiy kod ular uchun optimallashadi; kod soddaroq va progressiv (kichikdan kattaga) bo'ladi; kam quvvatli qurilmalar keraksiz uslublarni yuklamaydi.

Breakpointlar

Breakpoint — joylashuv o'zgaradigan ekran kengligi (media query'dagi qiymat). Universal standart yo'q, lekin keng tarqalgan qiymatlar:

~480px — kichik telefonlar;
~768px — planshetlar;
~1024px — kichik noutbuklar;
~1280px va undan katta — katta ekranlar.

Breakpointlarni qat'iy qurilma o'lchamiga emas, saytingiz joylashuvi buzilgan nuqtaga qarab tanlang. Sahifani asta-sekin toraytirib, dizayn qachon "buzila" boshlasa, o'sha yerga breakpoint qo'ying — bu eng amaliy usul.

Moslashuvchan rasm va matn

Rasmlar ota elementdan chiqib ketmasligi uchun ularga oddiy, lekin muhim qoida beriladi:

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

max-width: 100% — rasm ota elementdan kengroq bo'lmaydi (kichrayadi, lekin haqiqiy o'lchamidan kattalashmaydi). height: auto — balandlik nisbatini saqlaydi, rasm cho'zilib buzilmaydi.

Matnni ham moslashuvchan qilish mumkin. Zamonaviy clamp() funksiyasi shrift o'lchamini ekranga qarab avtomatik moslaydi — eng kichik va eng katta chegara orasida:

h1 {
  /* min 1.5rem, ideal 5vw, max 3rem */
  font-size: clamp(1.5rem, 5vw, 3rem);
}

Bu shuni anglatadi: shrift ekran bilan (5vw) o'sadi, lekin hech qachon 1.5rem'dan kichik yoki 3rem'dan katta bo'lmaydi. Media query'siz moslashuvchan sarlavha!

Amaliy misol: moslashuvchan karta panjarasi

Grid va media query birgalikda — telefonda 1 ustun, planshetda 2, kompyuterda 3 ustunli galereya:

/* Mobile-first: 1 ustun */
.galereya {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 768px) {
  .galereya { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .galereya { grid-template-columns: repeat(3, 1fr); }
}

Xulosa

Responsive dizayn — sayt barcha ekranlarga moslashishi;
Birliklar: px (qat'iy), % (otaga nisbatan), rem (ildizga — tavsiya etiladi), vw/vh (ekranga);
Majburiy birinchi qadam — viewport meta tegi;
@media — ekran o'lchamiga qarab uslubni o'zgartiradi (min-width/max-width);
Mobile-first — avval telefon uchun, keyin min-width bilan kattalashtirish;
Breakpointlarni dizayn buzilgan nuqtaga qarab tanlang;
img { max-width: 100%; height: auto; } — moslashuvchan rasm;
clamp() — media query'siz moslashuvchan shrift o'lchami.