CSS'da responsive-dizaynni qanday amalga oshirish mumkin?

MiddleCSS #css #responsive

Savol

CSS'dagi moslashuvchan (responsive) dizayn qanday tuzilgan: media so'rovlar (media queries) nima, mobile-first yondashuvi desktop-first'dan nimasi bilan farq qiladi va buning uchun qanday o'lchov birliklari ishlatiladi?

Qisqa javob

Responsive-dizayn viewport xususiyatlariga qarab turli stillarni qo'llaydigan media so'rovlar (@media) va kontekstga o'zi moslashadigan nisbiy o'lchov birliklari asosida quriladi. Mobile-first shuni anglatadiki, bazaviy stillar kichik ekran uchun yoziladi, min-width media so'rovlari esa katta ekranlar uchun stillarni qo'shadi/qayta belgilaydi.

Batafsil javob

Media so'rovlar (@media) shartlar bajarilganda (viewport kengligi, orientatsiya, qurilma turi, prefers-color-scheme va h.k.) CSS-qoidalar blokini qo'llash imkonini beradi. Eng ko'p kenglik bo'yicha breykpointlar ishlatiladi: @media (min-width: 768px) { ... }.

Mobile-first va desktop-first:

Mobile-first — bazaviy (media so'rovga o'ralmagan) stillar eng kichik ekran uchun yoziladi, keyin esa min-width orqali katta ekranlar uchun stillar qo'shilib, maket asta-sekin "qurib" boriladi. Bu progressiv yaxshilanish printsipiga mos keladi: mobil CSS soddaroq va yengilroq, murakkab ko'p ustunli raskladkalar esa baza ustiga qurilgan qo'shimcha.
Desktop-first — teskari yondashuv: bazaviy stillar desktop uchun, max-width media so'rovlari esa kichikroq ekranlar uchun maketni soddalashtiradi. Ko'pincha og'irroq va chalkash CSS'ga olib keladi, chunki desktop stillarini "bekor qilishga" to'g'ri keladi.

Zamonaviy amaliyotda mobile-first afzalroq hisoblanadi: u mobil qurilmalardagi unumdorlik ustuvorligiga va blok elementlarining tabiiy oqimiga (ular standart holda ustunga joylashadi, bu esa kichik ekranda aynan kerak bo'lgan narsa) yaxshiroq mos keladi.

Moslashuvchanlik uchun nisbiy birliklar:

% — otaga nisbatan.
em — joriy elementning font-sizeiga (yoki font bilan bog'liq bo'lmagan xususiyatlar uchun otaga) nisbatan.
rem — root elementning (html) font-sizeiga nisbatan, em kabi ichma-ichlik effektini to'plamasligi bilan qulay.
vw/vh — viewport kengligi/balandligiga nisbatan.
clamp() — minimal, afzal (odatda vwda) va maksimal qiymatlarni belgilaydigan funksiya, bu esa media so'rovlarsiz butunlay moslashuvchan masshtablashga imkon beradi.

Misol

/* mobile-first: kichik ekran uchun bazaviy stillar */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 16px;
}

.title {
  font-size: clamp(1.25rem, 4vw + 0.5rem, 2.5rem);
}

/* planshet va undan katta */
@media (min-width: 768px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

/* desktop va undan katta */
@media (min-width: 1200px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
    padding: 32px;
  }
}

Qo'shimcha savollar

Nega mobile-first odatda yakuniy CSS'ni kompaktroq qiladi?
clamp() tipografika uchun media so'rovlar to'plamini qanday almashtirishi mumkin?
Container so'rovlar (@container) moslashuvchanlikka yondashuvni @media bilan solishtirganda qanday o'zgartiradi?