ریسپانسیو کردن صفحات در المنتور

یه سایت رو تو دسکتاپ عالی طراحی کردید، اما وقتی تو موبایل بازش می‌کنید، همه چی بهم ریخته! 🤯 دلیلش چیه؟ انتخاب واحد اشتباه! اما نگران نباشید، یه جدول جادویی براتون آوردم که مثل یه نقشه گنج، راه رو بهتون نشون میده.

آموزش طراحی ریسپانسیو در المنتور

• ✅ (سبز): یعنی این واحد برای اون ویژگی مناسبه

• ❌ (صورتی): یعنی این واحد مناسب نیست و بهتره سراغش نری

جدول انتخاب واحدی که هر المنتورکاری باید بدونه!

• فونت‌ها (Font): برای فونت‌ها، بهترین دوستای شما rem و em هستن! ✅ این دو واحد، فونت‌ها رو نسبت به اندازه فونت اصلی صفحه یا المان والد تنظیم می‌کنن. یعنی چی؟ یعنی اگه کاربر تو تنظیمات مرورگرش اندازه فونت رو بزرگ‌تر کنه، فونت‌های سایت شما هم به همون نسبت بزرگ میشن و خوانایی حفظ میشه. 🤩 استفاده از px برای فونت‌ها مثل اینه که بخواید یه لباس سایز ثابت رو به همه آدم‌ها بپوشونید؛ بعضیا براشون گشاد میشه، بعضیا تنگ! ❌

• عکس‌ها (Image): وقتی صحبت از عکس‌ها میشه، درصد (%) و vw (Viewport Width) حرف اول رو می‌زنن! ✅ این واحدها باعث میشن عکس‌های شما خودشون رو با عرض صفحه نمایش تطبیق بدن. مثلاً اگه یه عکس رو ۱۰۰% عرض کانتینرش بذارید، همیشه تمام عرض رو پر می‌کنه، چه تو موبایل، چه تو دسکتاپ. 🖼️ استفاده از px برای عکس‌ها یعنی فاجعه! ❌ چون تو صفحه‌های کوچیک، عکس از کادر میزنه بیرون و زشت میشه.
• همیشه width: 100%; height: auto; تا تصویر نسبت‌ها را حفظ کند و در موبایل بزرگ یا کوچک نشکند.

• متن توضیحات (Text Description): مثل فونت‌ها، برای متن‌های توضیحات هم rem و em بهترین انتخابن! ✅ این واحدها تضمین می‌کنن که متن شما تو هر دستگاهی خوانا و مرتب باشه. 📖

• کانتینر اصلی (Main Container): برای کانتینرهای اصلی، درصد (%) و vw رو بچسبید! ✅ این واحدها به شما اجازه میدن که عرض کانتینر اصلی رو نسبت به عرض کل صفحه تنظیم کنید. اینجوری سایتتون تو هر سایزی از صفحه نمایش، بهینه دیده میشه. 🌐
• عرض اصلی سایت را با % (یا max-width: 1200px) محدود کنید تا در صفحات بزرگ، خوانایی حفظ شود.

• کانتینر داخلی (Inner Container): اینجا یه کم دستتون بازتره! برای کانتینرهای داخلی، هم درصد (%)، هم rem و هم em می‌تونن دوستای خوبی باشن! ✅ بستگی داره که بخواید کانتینرتون نسبت به والدش تغییر کنه یا نسبت به فونت اصلی. این انعطاف‌پذیری بهتون کمک می‌کنه چیدمان‌های پیچیده‌تری رو هم ریسپانسیو کنید. 🧩

• حاشیه (Margin): برای حاشیه‌ها، rem، px و em گزینه‌های مناسبی هستن! ✅ rem و em برای حاشیه‌هایی که می‌خواید با تغییر اندازه فونت یا المان‌های والد تغییر کنن، عالی هستن. اما اگه یه حاشیه ثابت و دقیق می‌خواید، px هنوز هم کار خودشو خوب انجام میده. 📏

• سایه (Shadow): برای سایه‌ها، px بهترین و تنها انتخاب شماست! ✅ سایه‌ها معمولاً نیاز به دقت پیکسلی دارن تا ظاهری شارپ و دلنشین داشته باشن. 🌑

• آیکون‌ها (Icon): آیکون‌ها هم مثل فونت‌ها، با px و em عالی کار می‌کنن! ✅ این واحدها کمک می‌کنن آیکون‌ها تو اندازه‌های مختلف صفحه نمایش، واضح و متناسب باشن. 🌟آیکون‌ها اغلب بخشی از متن به‌حساب می‌آیند.

نکات:

1. em وقتی می‌خواهید فونت وابسته به والد باشد، rem وقتی می‌خواهید وابسته به root.

2. آیکون‌های SVG  برابر با pxl 

تنظیمات در المنتور 

1. انتخاب المان🛠️

2. تب Style → Layout/Advanced

3. انتخاب واحد از منوی آبشاری (٪ / px / em / rem / vw)

4. پخش تست: با کلیدهای Desktop/Tablet/Mobile المنتور چک کنید

بهترین قالب ریسپانسیو المنتور

• قالب هلو المنتور از مخزن وردپرس

بهترین افزونه ریسپانسیو المنتور

• افزونه المنتور پرو

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

تنظیمات ریسپانسیو المنتور

این جدول مثل یه راهنمای سریع و باحال بهتون کمک می‌کنه تا بدونین برای هر ویژگی CSS تو المنتور، کدوم واحد رو انتخاب کنین. بیاین اول نگاهی به ساختار و نمادهای جدول بندازیم:

ساختار جدول

ستون‌ها (واحدها): شامل ۷ واحد اندازه‌گیری مختلف:

• Unitless (بدون واحد)
• px (پیکسل)
•    vh ارتفاع ( ویوپورت هایت)
• vw عرض (ویوپورت)
• em (نسبی به فونت والد)
• rem (نسبی به فونت ریشه)
• % (درصد)

بررسی ویژگی‌ها و واحدهای مناسبشون 

عرض (width: 100%)

• واحدهای مناسب:

vw-%: بهترین انتخاب برای اینکه المان ۱۰۰% عرض والدش رو بگیره.

px: برای یه عرض ثابت. مثلاً max-width: 1200px.