وبلاگ

آموزش کامل واکنش گرایی (رسپانسیوی) در المنتور

آموزش کامل واکنش گرایی (رسپانسیوی) در المنتور

در این آموزش می خواهیم بپردازیم به این که کلاً 0 تا 100 رسپانسیوی یا همان واکنشگرای در المنتور را یاد بگیریم چون این بحث خیلی مهم هست و هر سایتی که طراحی میشه باید حتما در دستگاه‌هایی مثل موبایل و تبلت به صورت کامل و بهینه نمایش داده شود و این از لحاظ تجربه کاربری (UX) بسیار اهمیت داره و برای همین من این آموزش را برای شما آماده کردم تا با ترفند ها و نکات رسپانسیو در المنتور آشنا بشید.

واکنش گرایی (رسپانسیوی) در المنتور
واکنش گرایی (رسپانسیوی) در المنتور

این روزها استفاده از دستگاه های نمایش همانند موبایل و تبلت بسیار مرسوم شده و کاربران اصولاً سایت‌ها و اپلیکیشن را با دستگاه های موبایل مشاهده می‌کنند و اگر سایتی در دستگاه های موبایل به درستی نمایش داده نشود مطمئن کاربران خود را از دست می دهد! پس یکی از قوانین مهم بهینه بودن یک سایت، واکنشگرایی در دستگاه‌هایی مثل موبایل هست. پس حتماً در این آموزش همراه من باشید تا بهتون بگم چطور به صورت کامل سایت خودتون رو در المنتور به صورت واکنش گرایی (Responsive) نمایش بدهید.

آموزش 0 تا 100 واکنش گرایی در المنتور

خیلی از کاربران این سوال را از من می پرسند که آموزشی در رابطه با واکنش گرایی در المنتور قرار بدید چون کلا اصول طراحی رسپانسیو در المنتور رو نمیدونیم و هر طرحی که طراحی می کنیم به صورت به هم ریخته در موبایل و تبلت نمایش داده می شود! برای همین این آموزش را برای شما آماده کردم تا کلاً رسپانسیوی در المنتور را یاد بگیرید و بتوانید سایت های خودتان رو در موبایل و تبلت به بهینه ترین حالت ممکن نمایش دهید.

تنظیمات اولیه واکنش گرایی در المنتور

در اولین قدم باید تنظیمات کلی رسپانسیوی یا همان واکنش گرای در المنتور را انجام دهیم. برای این منظور در ویرایشگر المنتور به بخش تنظیمات کلی برید و بر روی گزینه اول یعنی تنظیمات سایت کلیک کنید.

تنظیمات کلی واکنشگرایی در المنتور
تنظیمات کلی واکنشگرایی در المنتور

در میان گزینه‌هایی که برای شما در تنظیمات المنتور در سمت راست باز می شود بر روی طرح‌بندی کلیک کنید تا تنظیمات مربوطه باز شود. در اینجا دو زبان با عناوین ” تنظیمات طرح” و ” نقطه شکست” برای شما باز می شود.

تنظیمات نقطه شکست
تنظیمات نقطه شکست
تنظیمات طرح بندی
تنظیمات طرح بندی

در این تنظیمات می توانید عرض صفحه نمایش در موبایل تبلت و حالت دسکتاپ را به صورت شخصی تنظیم کنید. و یا می توانید تعیین کنید که در چه اندازه های موبایل نمایش داده بشه بعد در چه اندازه هایی حالت تبلت و دسکتاپ و همه این موارد قابل تنظیم هستند تا شما یک سایت شخصی به صورت سفارشی طراحی کنید.

[irinfobox]دقت داشته باشید که این بخش ها توسط خود المنتور مقدار گذاری شده و طبق آخرین اصول طراحی سایت به صورت رسپانسیو هست نیاز نیست که شما این مقادیر را تغییر دهید. و فقط هدف از گفتن این بخش این بود که اگر خواستید به صورت کامل سفارشی کنید می توانید از این بخش اقدام کنید.[/irinfobox]

واحدهای مقدارگذاری در المنتور

هنگام طراحی با المنتور، ممکن است متوجه شوید که برخی از عناصر گزینه هایی برای اندازه گذاری دارند ، به شما امکان می دهد PX ، EM ، REM ،٪ ، VW یا VH را انتخاب کنید. اما این گزینه ها در واقع به چه معنا هستند و چه زمانی باید از یکی یا دیگری استفاده کنید؟

واحدهای مقداردهی در المنتور
واحدهای مقداردهی در المنتور

بیایید با اصول شروع کنیم.

در CSS می توانید اندازه ها یا طول عناصر را با استفاده از واحدهای مختلف اندازه گیری مشخص کنید. واحدهای اندازه گیری که در برخی از گزینه های المنتور پیدا خواهید کرد شامل PX ، EM ، REM ،٪ ، VW و VH است ، اگرچه چندین مورد دیگر در CSS وجود دارد. همه عناصر المنتور همه این واحدها را ارائه نمی دهند. المنتور فقط گزینه هایی را ارائه می دهد که بیشترین معنا را برای عنصر داده شده دارند.

مقاله پیشنهادی من : آموزش افزایش سرعت المنتور تا 90%

مهمترین جنبه برای یادگیری در مورد واحدهای مختلف این است که برخی از واحدها مانند PX واحدهای مطلق و برخی دیگر واحدهای نسبی هستند.

واحدهای مطلق

PX: پیکسل ها (px) واحد مطلق در نظر گرفته می شوند. اما در خود دستگاه ، واحد PX ثابت است و براساس هیچ عنصر دیگری تغییر نمی کند. استفاده از PX می تواند برای سایتهای رسپانسیو مشکل ساز باشد ، اما برای حفظ اندازه ثابت برخی عناصر مفید است. اگر عناصری دارید که نباید اندازه آنها را تغییر دهید ، استفاده از PX انتخاب خوبی است.

واحدهای نسبی

  • EM: مربوط به عنصر والد است
  • REM: مربوط به عنصر ریشه (برچسب HTML)
  • ٪: مربوط به عنصر والد است
  • VW: نسبت به عرض
  • VH: نسبت به ارتفاع

برخلاف PX ، واحدهای نسبی مانند ٪ ، EM و REM برای طراحی واکنش گرا مناسب ترند و همچنین به رعایت استانداردهای دسترسی کمک می کنند. واحدهای نسبی در دستگاه های مختلف مقیاس بهتری دارند زیرا می توانند با توجه به اندازه عنصر دیگر بالا و پایین شوند.

مقایسه واحد های مقداردهی در المنتور
مقایسه واحد های مقداردهی در المنتور

بیایید به یک مثال ساده نگاه کنیم.

در بیشتر مرورگرها ، اندازه فونت پیش فرض 16 پیکسل است. واحدهای نسبی اندازه را از این پایه محاسبه می کنند. اگر آن را با تنظیم اندازه پایه برای برچسب HTML از طریق CSS تغییر دهید ، این مبنایی برای محاسبه واحدهای نسبی در بقیه صفحه می شود. به همین ترتیب ، اگر کاربری اندازه قلم خود را تنظیم کند ، این مبنایی برای محاسبه واحدهای نسبی می شود.

بنابراین منظور از این واحدها هنگام برخورد با پیش فرض 16px چیست؟

عددی که تعیین می کنید این تعداد را در اندازه پیش فرض ضرب می کند.

1em = 16px (1 * 16)

2em = 32px (2 * 16)

.5em = 8px (.5 * 16)

1rem = 16px

2rem = 32px

.5rem = 8px

100 = = 16px

200 = = 32px

50 = = 8px

خوب ، عالی است ، اما اگر شما یا کاربر اندازه پیش فرض را تغییر دهید چه؟ از آنجا که اینها واحدهای نسبی هستند ، مقادیر اندازه نهایی بر اساس اندازه پایه جدید ساخته می شوند. اگرچه پیش فرض 16 پیکسل است ، اما اگر شما یا کاربر آن را به 14 پیکسل تغییر دهید ، اندازه های محاسبه شده در زیر خواهد بود:

1em = 14px (1 * 14)

2em = 28px (2 * 14)

.5em = 7px (.5 * 14)

1rem = 14px

2rem = 28px

.5rem = 7px

100 = = 14px

200 = = 28px

50٪ = 7px

این به کاربر این آزادی را می دهد که اندازه قلم پیش فرض مرورگر خود را تنظیم کند ، در حالی که مقیاس نسبی هر عنصری را که تعیین کرده اید همچنان حفظ کند.

اندازه های پیشفرض برای موبایل و تبلیت و کامپیوتر

درحالت اصولی اندازه ها در موبایل و تبلت و همچنین حالت دسکتاپ مقدار های ثابتی دارند که در زیر به این مقدارها اشاره کردم. البته این اندازه ها در حالت پیش فرض در المنتور مقدار گذاری شده و نیاز نیست که شما این گزینه ها را تغییر دهید.

  • حالت دسکتاپ : بالای ۱۰۲۵
  • حالت تبلت : بین ۷۶۸ تا ۱۰۲۴
  • حالت موبایل : پایین ۷۶۷

اینها اندازه های اصولی و بهینه هستند که برای سه حالت استفاده می شود.

نمایش سایت در حالت موبایل

در اولین قدم اگر می خواهید که سایت را در موبایل و تبلت به صورت رسپانسیو نمایش دهید برای این کار باید حالت موبایل و تبلت را در المنتور فعال کنید. برای این منظور در پایین تنظیمات افزونه المنتور بر روی آیکون رسپانسیو یا موبایل کلیک کنید.

آیکون واکنشگرایی در المنتور
آیکون واکنشگرایی در المنتور

سپس در سمت چپ مشاهده می کنید که سایت در حالت موبایل برای شما نمایش داده می شود.

پیشنمایش در دستگاه های نمایش
پیشنمایش در دستگاه های نمایش

سپس در بخش بالا در نوار خاکستری رنگ اگر بر روی هر آیکون کلیک کنید سایت و صفحه شما در همان صفحه نمایش برای شما نمایش داده می شود، که دارای سه حالت موبایل تبلت و دسکتاپ هست. همچنین در سمت چپ اندازه ها را به صورت پیکسل برای شما نمایش می دهد.

مقادیر مجاز قابل تنظیم در دستگاه های نمایش

آیا ما می‌توانیم همه مقادیر را برای موبایل و تبلت در المنتور تغییر دهیم!؟ جواب این سوال قطعاً نه است! چون المنتور برای این مورد مشخص کرده است که چه موادی را برای دستگاه های نمایش یعنی برای موبایل و تبلت می توانیم تغییر دهیم.

فعال سازی آیکون های واکنشگرایی
فعال سازی آیکون های واکنشگرایی

اگر بر روی هر المان یا بخش کلیک کردید و همه گزینه هایی که دارای آیکون تنظیم برای موبایل و تبلت مشاهده کردید میتوانید این گزینه ها را برای حالت های نمایش تنظیم کنید.

حتما این مقاله را ببینید : ساخت بخش ورود و ثبت نام در المنتور

اگر در تصویر بالا دقت کنید , بر روی آیکون موبایل کلیک کنید مشاهده می کنید که سه حالت دسکتاپ تبلت و موبایل به صورت کشویی (به صورت آیکون) باز می شود که اگر بر روی هر کدام کلیک کنید می توانید تنظیمات مربوط به دستگاه مورد نظر را تنظیم کنید.

?نکته مهم!!
اگر این آیکون ها را در کنار مقادیر مورد نظر مشاهده نکردید اگر بخواهید مقادیر را تغییر دهید در هر سه حالت موبایل تبلت و دسکتاپ همه این تغییرات اعمال می شوند و طرح شما را به هم می ریزند.

پنهان یا نمایش دادن المان ها در دستگاه های مختلف

در بحث واکنش گرایی گاهی پیش می آید که ما بخواهیم برخی از المان های بخش ها را در حالت های موبایل تبلت و دسکتاپ به صورت پنهان در بیاوریم. یعنی بخش هایی را که می‌خواهیم در حالت موبایل و یا تبلت نمایش ندهیم و فقط در حالت دسکتاپ برای کاربران نمایش داده شود.

برای این مورد بر روی هر سکشن و یا هر المانی که می خواهید کلیک کنید و در بخش تنظیمات المنتور به زبان پیشرفته بیایید و بر روی واکنش گرایی کلیک کنید.

گزینه های واکنشگرایی در المنتور
گزینه های واکنشگرایی در المنتور

این بخش کلا دارای سه گزینه هست :

  • مخفی‌ در دسکتاپ : اگر این گزینه را برای هر المان یا بخش فعال کنید آن بخش در حالت دسکتاپ نمایش داده نمی شود.
  • مخفی‌ در تبلت : اگر این گزینه را برای هر بخش را المان فعال کنید آن بخش در حالت تبلت پنهان می شود.
  • مخفی‌ در موبایل : هر المانی را خواستید که در موبایل مخفی شود می توانید این گزینه را برای این بخش فعال کنید.

استفاده از مدیا کوئری برای رفع محدودیت‌های رسپانسیو در المنتور

در برخی از موارد شاید شما نتوانید برخی از گزینه ها و استایل ها را در موبایل و تبلت به صورت سفارشی در المنتور نمایش بدهید. به طور مثال اگر شما بخواهید رنگ یک تیتر یا ویجت سربرگ را در موبایل و یا تبلت تغییر دهید این در المنتور امکان ندارد و فقط یک رنگ می توانید برای همه بخش ها را انتخاب کنید برای این منظور و رفع این محدودیت ها باید از مدیا کوئری استفاده کنیم.

مدیا کوئری ها کدهایی هستند که ما تعیین می‌کنیم در اندازه‌های مختلف المان ها به چه صورت نمایش داده شوند و می توانیم به راحتی استایل و اندازه آن را در دستگاه موبایل و تبلت به صورت کامل سفارشی کنیم.

به کدهای زیر دقت کنید :

@media (min-width: 320px) and (max-width:767px) {
     css codes
}

به طور مثال در کد بالا ما تعیین کردیم که در حالت موبایل چه استایل ها و کد هایی بر روی المان های مختلف در المنتور اعمال شود. و هر کدی که به جای عبارت “css codes” وارد کنید فقط بر روی موبایل در المنتور اعمال می شود. چون ما تعیین کردیم که از ۳۲۰ تا ۷۶۷ برای دستگاه های موبایل هست.

حالا با همه این آموزش ها شما به راحتی می توانید سایت ها و یا صفحات خود را در حالت های موبایل و تبلت به بهینه ترین حالت ممکن نمایش بدهید اما در ویدئوی آموزشی همه این بخش را به صورت عملی و پروژه محور بر روی صفحه یا سایت انجام می دهیم تا شما بهتر بتوانید همه این مباحث را یاد بگیرید.

? فیلم آموزشی

https://youtu.be/X_NKQavR3zE
5/5 - (1 امتیاز)
اشتراک گذاری:

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید

در خدمت شما هستیم!

در صورت نیاز به مشاوره می توانید فرم را تکمیل نمایید و یا با ما در ارتباط باشید.