Responsive dizayn — veb-interfeysning ekran o‘lchami, orientatsiya, input turi va foydalanuvchi sozlamalariga mos ravishda joylashuvi hamda ko‘rinishini o‘zgartirish yondashuvidir. Bitta sahifa turli qurilmada alohida sayt yaratmasdan o‘qiladigan va boshqariladigan bo‘lib qoladi. Moslashuv faqat elementlarni kichraytirish emas, kontent va funksiyaning mavjud maydonga qayta joylashishidir.
Fluid layout
Foiz, fr, minmax() va moslashuvchan max-width qiymatlari kontentni qat’iy piksel eniga bog‘lamaydi. Container katta ekranda cheksiz cho‘zilmasligi, kichik ekranda viewportdan chiqmasligi mumkin.
.layout {
width: min(100% - 2rem, 72rem);
margin-inline: auto;
}
Bu container ikki tomonda bo‘shliq saqlaydi va katta ekranda 72 remdan oshmaydi. rem foydalanuvchi font sozlamasi bilan yaxshiroq moslashadi.
Media query
Media query viewport eni, orientation, hover imkoniyati, rang sxemasi yoki reduced motion kabi xususiyatga qarab CSS qoidasini yoqadi.
.cards { display: grid; grid-template-columns: 1fr; }
@media (min-width: 48rem) {
.cards { grid-template-columns: repeat(3, 1fr); }
}
Breakpoint mashhur telefon modeliga emas, kontent joylashuvi buziladigan nuqtaga qo‘yiladi. Mobile-first yondashuv bazaviy kichik ekran uslubidan boshlanib, katta maydon uchun min-width bilan imkoniyat qo‘shadi.
Container query
Media query butun viewportni ko‘radi. Qayta ishlatiladigan komponent esa sidebar va asosiy sahifada turli kenglikda bo‘lishi mumkin. Container query komponentning o‘z konteyneri o‘lchamiga qarab layoutni almashtiradi. Bu komponentni sahifa joyidan kamroq bog‘liq qiladi.
Rasm va media
max-width: 100% rasmning containerdan chiqishini cheklaydi. srcset va sizes brauzerga ekran hamda layout uchun mos resolutiondagi rasmni tanlash imkonini beradi. <picture> art direction uchun turli crop yoki format beradi.
Rasm eni va bo‘yi oldindan berilsa, brauzer joy ajratadi va yuklanishdagi layout shift kamayadi. Katta desktop rasmini kichik telefonga yuborish network va decode resursini isrof qiladi.
Matn va boshqaruv
Matn satri juda uzun bo‘lsa o‘qish qiyin, juda qisqa bo‘lsa ko‘z tez-tez qator almashtiradi. ch birligi bilan o‘qish eni cheklanishi mumkin. clamp() sarlavha o‘lchamini minimal va maksimal chegara orasida fluid o‘zgartiradi.
Touch qurilmada hover yagona signal bo‘la olmaydi. Tugma va linklar yetarli bosish maydoniga ega bo‘ladi. Klaviatura focusi barcha layoutda ko‘rinadi. Zoomni viewport metadata bilan taqiqlash ko‘rish imkoniyati cheklangan foydalanuvchiga zarar qiladi.
Testlash
Faqat bir nechta tayyor device preset yetarli emas. Layout oraliq kenglik, uzun tarjima, 200 foiz zoom, katta font, landscape va real touch qurilmada tekshiriladi. Horizontal scroll faqat data table yoki kod kabi ongli holatda qoladi. DOM tartibi CSS orqali vizual o‘zgartirilsa, screen reader va keyboard focus mantiqiy ketma-ketlikni saqlashi kerak.
Jadval va murakkab kontent
Katta data table’ni mobil ekranda har doim cardga aylantirish to‘g‘ri emas, chunki qatorlararo taqqoslash yo‘qoladi. Muhim ustunlarni sticky saqlash, gorizontal scroll, column tanlash yoki alohida detail view vazifaga qarab ishlatiladi. Scroll hududi keyboard bilan fokuslanishi va uning mavjudligi vizual ko‘rinishi kerak. Grafik SVG viewBox orqali scale bo‘lishi mumkin, lekin matn o‘qilmaydigan darajada kichraymasligi kerak. Ba’zan chartning soddalashtirilgan varianti va data table alternativasi kichik ekran hamda accessibility uchun yaxshiroq natija beradi.
Bog‘liq tushunchalar
CSS, media query, container query, mobile-first, Flexbox, Grid, responsive image