Moslashuvchan veb-dizayn: boshlovchilar uchun amaliy qo'llanma

Tashriflarning yarmidan ko'pi telefonlardan bo'ladi, shuning uchun faqat kompyuterda ishlaydigan sayt tashrif buyuruvchilarni yo'qotadi. Moslashuvchan dizayn bitta saytni istalgan ekranga moslashtiradi.

1. Viewport tegini qo'shing

Head qismiga <meta name="viewport" content="width=device-width,initial-scale=1"> ni kiriting. Usiz telefonlar kichraytirilgan kompyuter sahifasini ko'rsatadi.

2. Avval mobil uchun loyihalang

Asosiy CSSni kichik ekranlar uchun yozing, keyin kattaroq ekranlar uchun min-width media so'rovlari bilan qoidalar qo'shing. Bu mobil sahifalarni yengil va sodda saqlaydi.

3. Moslashuvchan maketlardan foydalaning

CSS Grid va Flexbox kontentning tabiiy joylashishi va o'lchamini o'zgartirishiga imkon beradi. grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) qoidasi media so'rovsiz moslashuvchan setka yaratadi.

4. Rasmlarni moslashuvchan qiling

Rasmlarga max-width: 100% va height: auto bering, kichik ekranlarga kichikroq fayllar berish uchun srcset atributidan foydalaning.

5. Nisbiy birliklardan foydalaning

Matn va bo'shliqlar uchun qat'iy pikselar o'rniga rem, em, foiz va clamp() ni afzal ko'ring, shunda maketlar silliq o'lchanadi.

6. Haqiqiy qurilmalarda sinang

Brauzer oynasini o'zgartiring, dasturchi vositalaridagi qurilma panelidan foydalaning va haqiqiy telefonda tekshiring. Juda kichik matn, bosish qiyin tugmalar va gorizontal aylantirishni qidiring.