different layout based Device

سلام ، شاید خیلی سوال بپرسم عذر خواهی میکنم از این بابت ، من سالهاست که .net کارمیکنم بک اند و فرانت. یک سوال کلی در مورد react داشتم. اخیرا با سایت هایی مواجه میشم که layout سایت با توجه به سایز صفحه به کل تغییر میکنه فرضا هدر سایت در صورتی که مرورگر در اندازه گوشی همراه باز بشه یا دسکتاپ ، html سایت در لجظه تغییر میکنه. فرضا نوار سرچ سایت به کل در جای دیگه ای غیر از هدر لود میشه و وقتی سایز مرورگر تغییر میکنه این المنت ناپدید میشه. در دیجیکالا این موردو میشه دید. سوالم این هست که این مواردو با react اتجام میدن؟ خودم موارد اینچنینی رو در razor نوع دیوایس رو از HttpContext میگیرم و باتوجه به نوع دیوایس html رو متفاوت لود میکنم که البته ایده آل نیست چون با کوچک و بزرگ کردن مرورگر این اتفاق نمی‌افته فقط در خود دیوایس‌ها درست عمل میکنه.

سلام وقت بخیر .

به این نوع سایت‌ها responsive گفته میشه که با توجه به اندازه‌های مختلف screen تغییر شکل میدن .

معمولا این موارد رو با css مدیریت میکنن ولی از طریق js هم امکانش هست و در بعضی موارد لازم میشه .

برای اطلاع بیشتر اینجا رو مطالعه کنید.

موفق باشید.

علیرضا ایمانی ۲۱ تیر ۱۴۰۱، ۱۴:۴۸

ممنون بابت پاسخ ، شاید سوالو خوب مطرح نکردم ، من با responsive دیزاین کاملا اشنا هستم ممنون میشم سوالمو یک بار دیگه بخونید. موردی که مطرح کردم با css انجام نمیشه مشخصا جاوا اسکریپت هم نیست چون روش بهینه ای برای حذف یک المنت برای مثال "سرچ باکس" و ایجاد آن در بخش دیگری در html با هر بار تغییر سایز مرورگر نیست.

محمد حسینی ۲۱ تیر ۱۴۰۱، ۱۵:۰۱

با کمی ریسرچ متوجه شدم که این موردی که پرسیدم رو با reactPortals انجام میدن، نمیدونم این مورد در سر فصل‌های دوره هست یا خیر.

محمد حسینی ۲۱ تیر ۱۴۰۱، ۱۵:۲۹

سلام

تا جایی که متوجه سوالتون شدم این مورد ارتباط مستقیمی با reactPortal نداره

این مورد دقیقا برمیگرده به همون responsive بودن سایت

حالا روش پیاده سازی این responsive با توجه به شرایط میتونه متفاوت باشه و استراتژی‌های زیادی براش وجود داره

در این شرایط اولویت این هست که با همون css این مورد رو هندل بکنن مثلا مشخص بکنن در چه سایزی کلا اون المنت نمایش داده نشه یا نمایش داده بشه و با همین روش دقیقا میشه اون موردی رو که گفتید پیاده سازی کرد

یک روش دیگه هم میتونه این باشه که داخل خود react با توجه به سایز بیایم شرط بزاریم که یک کامپوننت نمایش داده بشه یا نه

در بعضی از شرایط هم که حجم تغییرات خیلی زیاد باشه و نشه به این راحتی اون رو هندل کرد که البته یکی از سخترین روش‌ها ه محسوب میشه این هست که بیان برای سایز‌ها مختلف کلا app جدا زده بشه و کل برنامه متناسب با اون سایز لود بشه

مجتبی سوری ۲۱ تیر ۱۴۰۱، ۱۵:۵۶

با تشکر از توضیح جامع. مواردی که باهاشون مواجه بودم کل المنت حذف و در جای دیگری از html لود میشه ، صرفا دیزاین css تغییر نمیکنه ( یا المنت hide یا visible نمیشه). یک div جدید در جای دیگری با parent دیگری ایجاد و خذف میشه و تمامی این موارد با تغییر سایز مرورگر هست.

محمد حسینی ۲۱ تیر ۱۴۰۱، ۱۶:۱۲

این نمونه‌ها رو دقیق باید زمان پیاده سازی تصمیم گرفت که از چه روشی انجام بشه ولی ما راحت میتونیم سایز صفحه رو داخل کد تشخیص بدیم و متناسب با اون کامپوننت‌ها رو لود بکنیم

نمونه‌های رو هم دیدم که فقط با همون css این موارد رو هم کامل پیاده سازی کردن که بر اساس سایز المنت‌ها رو نمایش میدن

البته این مورد رو هم کامل می‌پذیرم شاید یک موردی خاصی باشه که نشه به این راحتی اون رو پیاده سازی کرد و در این شرایط همیشه گزینه اول اینه که مذاکره بشیه برای تغییر دیزاین!! که در ۸۰ درصد موارد همین جواب میده

بهترین پاسخ

مجتبی سوری ۲۱ تیر ۱۴۰۱، ۱۶:۲۳