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

خلاصه:

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

• هم از دید کاربر بدون اسکرول افقی
• هم از دید ربات های گوگل

طراحی ریسپانسیو یا واکنشگرا

🤷‍♂️ طراحی ریسپانسیو یعنی ساختن وب‌سایتی که خودش رو با اندازه صفحه نمایش کاربر تطبیق بده. فرقی نمی‌کنه کاربر با موبایل سایت شما رو باز کنه 📱 یا با یه مانیور بزرک 💻، سایت باید تو هر شرایطی عالی به نظر برسه.

المنتور: انتخاب درست واحدهای CSS (مثل px، em، % و …) می‌تونه سایت‌تون رو از خوب به عالی تبدیل کنه. 🛠️ بریم سراغ جدول جادویی‌مون!

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

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

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

ساختار جدول

px (پیکسل) –  vh ارتفاع ( ویوپورت هایت)

vw عرض (ویوپورت)  –   em (نسبی به فونت والد)

rem (نسبی به فونت ریشه) –   % (درصد)

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

بهترین قالب ریسپانسیو المنتوری میتوان به موارد زیر اشاره کرد!

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

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

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

نقاط شکست (Breakpoints) در المنتور

اهمیت نقاط شکست

تنظیم نقاط شکست سفارشی در المنتور

مراحل فعال‌سازی و تنظیم:

حل مشکلات ریسپانسیو

مقاله افزایش سرعت المنتور