DEV Community

Cover image for Adaptive va Repsonsive dizayn farqi
Diyor Kadirkulov
Diyor Kadirkulov

Posted on

Adaptive va Repsonsive dizayn farqi

Intervyularda HTML/CSS mavzularida ko'p tushadigan savollardan biri bu Responsive va Adaptive dizan farqi so'raladi. Umuman olganda web dasturlashda bu terminlarni siz ko'p uchratasiz. Xo'sh Adaptive va Responsice dizayn o'rtasida qanday farq bor?

Responsive Design - bu barcha devayslar uchun(desktop, tablet, mobile) bir xil moslashuvchan layout yoki component ishlatishdir.

Keling bir oddiy misol olamiz. Sizning saytingizda Header layouti bor. Agar sizning Header layoutingiz barcha ekran (screen) o'lchamlariga(size) moslashib ketadigan qilib yozgan bo'lsangiz bu layout responsive qilib yozilgan bo'ladi. Qisqacha qilib pasda rasmda tushuntirishga harakat qilaman.

Responsive Design

Rasmda ko'rsatilgandek sizdagi Header layout bir martta yozilgan va barcha qurilma (device) o'lchamlariga tushib ketaveradi.

Adaptive Design - siz har biz qurilma(device) uchun alohida layoutlar yozib chiqasiz. Misol uchun, tepada aytilgan Header layoutingizni Mobile, Desktop, Tablet uchun alohida layout yasaysiz va har bir qurilma uchun o'z layoutini ishlatasiz. Misol uchun Mobil qurilmalar uchun(mobile devices) Mobile Header layouti.

Differences of Adaptive and Responsive design

Ushbu jadvalda Key differences ko'rsatilgan.

Qaysi birini tanlash kerak?
Adaptive design:

  • Ma'lum bir qurilmalarga moslashtirilgan maxsus tajriba kerak bo‘lsa.
  • Foydalanuvchilaringiz qaysi qurilmalardan foydalanishini aniq bilsangiz.

Responsive design:

  • Keng diapazonli qurilmalar uchun moslashuvchan yechim kerak bo‘lsa.
  • Saytni kelajakda yangi qurilmalarga tayyor qilishni istasangiz.

Ko‘pchilik hollarda responsive design ko‘proq afzal ko‘riladi, chunki u moslashuvchan va boshqarish oson. Ammo, adaptive design ba'zi maxsus ehtiyojlar uchun foydali bo‘lishi mumkin.

Top comments (0)