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.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more