با رشد روز افزون استفاده از دستگاه های مختلف (مانند موبایل،تبلت و . . .) توسط کاربران برای بازدید از صفحات وب مفهومی به اسم واکنش گرایی یا Responsive بوجود آمد.
طراحی واکنش گرا باعث می شود تا صفحات وب ما منعطف باشد و در دستگاه های مختلف به درستی و بدون بر هم ریختگی المان ها نمایش داده شوند.
واکنش گرایی در صفحات وب ما تا حد زیادی با استفاده از Css انجام میشه با استفاده از اون تعریف میکنیم با کوچک تر شدن صفحه ما در اندازه های مشخص وب سایت ما چه واکنشی نشون بده تا المان های به خوبی هم چنان نمایش داده بشه.
در واکنش گرایی از روش هایی مانند حذف المان های غیر ضروری و نمایش محتوای اصلی در اندازه های کوچکتر یا تغییر نحوه نمایش المان ها استفاده میکنیم برای مثال در تصویر بالا متن ها حذف شده و منو به صورت کشویی تعریف شده تا فضای بیشتری برای نمایش محتوای اصلی وجود داشته باشد.
برای اینکه صفحه ما واکنش گرا باشد موارد مختلفی را باید لحاظ کنیم اما مهمترین آن ایجاد نقاط شکست است
با توجه به عرض صفحه نمایش در دستگاه های مختلف برای صفحه وب خود تعریف میکنیم تا با کوچکتر شدن عرض صفحه نمایش زمانی که به اندازه خاصی رسید استایل هایی را اعمال کن
مانند کوچکتر کردن عرض صفحه و اندازه المان ها و . . . تا صفحه وب در آن اندازه مورد نظر به درستی نمایش
داده شود
اگر کمی با Css آشنا هستید به تصویر زیر دقت کنید نحوه تعریف نقاط شکست به صورت زیر می باشد
در طراحی واکنش گرا یا Responsive ابتدا صفحه خود را با توجه به اندازه صفحه نمایش بزرگتر مانند دسکتاپ طراحی می کردیم و با کوچک تر شدن صفحه تغییرات را اعمال میکردیم.
اما طراحی Mobile First برعکس آنچه در طراحی واکنش گرا رخ می دهد انجام می شود یعنی ابتدا صفحه وب را با توجه به اندازه صفحه نمایش کوچکتر طراحی می کنیم سپس با بزرگتر شدن صفحه نمایش به سراغ اعمال تغییرات در نحوه نمایش المان ها در صفحه وب خود می شویم.
طراحی انطباق
به جای max-width از min-width استفاده میکنیم تا با بزرگتر شدن عرض تغییرات اعمال شود.
در طراحی Responsive و Mobile First ما فقط یک صفحه وب تعریف می کردیم و با المان های صفحه وب خود را برای نمایش در اندازه های مختلف منعطف می کردیم .
اما در طراحی انطباقی یا Adaptive ما برای هر اندازه ای یک صفحه ی وب جداگانه تعریف میکنیم.
برای مثال در کدی که قبل تر بررسی کردیم 5 عرض را مشخص کردیم تا با توجه به آن تغییراتی اعمال شود.
حال در طراحی انطباقی باید 5 صفحه وب جداگانه تعریف کنیم تا دقیقا منطبق با آن اندازه نمایش داده شوند.
طراحی انطباقی نتیجه دقیق تری از طرح را برای ما ارائه می دهد اما انعطاف کمتری را دارد و کدهای بیشتری نسبت به طذاحی واکنش گرا باید نوشته شود.
در طراحی واکنش گرا صفحه وب به صورتی طراحی می شود که در اندازه های جدید هم به احتمال زیاد بدون بر هم ریختگی نمایش داده شود.
برای واکنش گرایی باید به سی اس اس مسلط باشید دوتا ماژول قدتمند سی اس اس که به ما کمک میکنند تا صفحات وب واکنش گرا یا responsive داشته باشیم رو توی پست های زیر توضیح دادم
