اصول واکنشگرایی (Responsive basics)
در ابتدای این سری روی ساخت برای دسکتاپ تمرکز کردیم. حالا وقت آن است که همان صفحه را برای همه اندازههای نمایشگر بهینه کنیم.
بیش از نیمیاز بازدیدکنندگان شما از گوشی یا تبلت استفاده میکنند. طراحی واکنشگرا یعنی طرحبندیهای شما با هر اندازهای از صفحهنمایش بهزیبایی سازگار شوند.
درک Breakpointها
Breakpointها آستانههای عرض صفحهای هستند که طراحی شما با آنها سازگار میشود. Bricks چهار breakpoint پیشفرض دارد:
| Breakpoint | عرض صفحه | هدف |
|---|---|---|
| Desktop | بدون محدودیت (پایه) | لپتاپ، مانیتور بزرگ |
| Tablet portrait | کمتر از ۹۹۲px | آیپد، تبلت |
| Mobile landscape | کمتر از ۷۶۸px | گوشی افقی |
| Mobile portrait | کمتر از ۴۷۸px | گوشی عمودی |
برای جابهجایی بین breakpointها روی آیکونهای دستگاه در نوار ابزار کلیک کنید. عرض بوم تغییر میکند تا نشان دهد کاربران در آن اندازه صفحه چه میبینند.
نحوه کار وراثت: استایلهایی که در Desktop تنظیم میکنید بهطور خودکار برای همه breakpointها اعمال میشوند. وقتی به breakpoint کوچکتری میروید و مقداری را تغییر میدهید، آن تغییر برای همان breakpoint و هر چیز کوچکتر اعمال میشود. فقط آنچه باید تغییر کند را override میکنید — همه چیز را از صفر تعریف نمیکنید.
مثال: Direction یک Container را در Desktop روی Row تنظیم کنید. به Mobile landscape بروید و آن را Column کنید. Desktop و Tablet portrait کنار هم میمانند. Mobile landscape و Mobile portrait بهصورت عمودی چیده میشوند.
Bricks بهصورت پیشفرض از رویکرد desktop-first استفاده میکند (طراحی بزرگ، اصلاح کوچکتر). اکثر کاربران این رویکرد را ترجیح میدهند چون «کوچک کردن» آسانتر از «بزرگ کردن» است.
گردش کار واکنشگرا
بیایید بخش Hero که قبلاً ساختیم را واکنشگرا کنیم.
۱. تبلت را بررسی کنید
روی آیکون Tablet portrait در نوار ابزار کلیک کنید و به طرحبندی نگاه کنید. موارد رایج برای بررسی:
- آیا طرحبندی دوستونه هنوز راحت به نظر میرسد یا تنگ شده؟
- آیا padding با اندازه این صفحه متناسب است؟
۲. فاصله را تنظیم کنید
Section شما padding 80px دارد. در تبلت این فاصله زیاد است.
- Section را انتخاب کنید
- مطمئن شوید در breakpoint Tablet portrait هستید
- Padding بالا/پایین را به
60تغییر دهید
Desktop همان 80px را نگه میدارد. Tablet و کوچکتر از 60px استفاده میکنند.
۳. به موبایل بروید و ستونها را روی هم قرار دهید
در گوشی، Hero دوستونه (متن چپ، تصویر راست) خیلی تنگ است. بیایید آنها را روی هم بگذاریم.
- روی Mobile landscape در نوار ابزار کلیک کنید
- داخل Hero، Container را انتخاب کنید
- در Layout، Direction را از
RowبهColumnتغییر دهید
حالا متن و تصویر در موبایل عمودی روی هم قرار میگیرند. Desktop و Tablet portrait کنار هم میمانند. این رایجترین تکنیک واکنشگراست: افقی در صفحههای بزرگ، عمودی در صفحههای کوچک.
۴. Mobile portrait را بررسی کنید
برای کوچکترین نما روی Mobile portrait کلیک کنید. در صورت نیاز padding را کمیبیشتر کاهش دهید (حدود 32). بررسی کنید دکمهها به اندازه کافی بزرگ باشند تا راحت لمس شوند.
مخفی کردن المانها در Breakpointهای خاص
گاهی میخواهید المانی در دسکتاپ نمایش داده شود ولی در گوشی مخفی باشد.
- المان را انتخاب کنید
- به breakpointی بروید که باید مخفی شود
- در Layout، Display را روی
Noneتنظیم کنید
المان در آن breakpoint و کوچکتر مخفی میشود و در بقیه جاها نمایش داده میشود.
دو رویکرد برای مقادیر واکنشگرا
تا اینجا دستی یک مقدار (مثل padding 60px) را در هر breakpoint تنظیم کردیم. این برای تصمیمات طرحبندی مثل چیدمان ستونها یا تنظیم فاصله خوب کار میکند.
اما رویکرد دوم هم وجود دارد که خصوصاً برای اندازه فونت و فاصلهگذاری مفید است: به جای انتخاب مقادیر خاص در هر breakpoint، حداقل و حداکثر را تعریف میکنید و به مرورگر اجازه میدهید بر اساس عرض صفحه محاسبه کند. اصلاً به breakpoint نیاز ندارید.
مثال: عنوانی که حداقل 24px در کوچکترین صفحه و هرگز بیشتر از 48px در پهنترین صفحه باشد. بین این دو حد، بهصورت خودکار مقیاس میشود.
Bricks این قابلیت را دارد. Style Manager (همان پنجرهای که برای Theme Styles استفاده کردید) تبهای Typography و Spacing دارد که میتوانید این مقیاسهای سیال را بهعنوان متغیرهای CSS بسازید. مقیاس را یک بار تنظیم کنید، متغیرها را روی المانها اعمال کنید، و واکنشگرایی برای آن مقادیر بهطور خودکار انجام میشود.
این موضوع پیشرفتهتری است و الان لازم نیست. اما ارزش دانستن دارد:
- مقادیر دستی در هر breakpoint — صریح، دستی، عالی برای طرحبندی
- مقیاسبندی سیال (Fluid) — یک محدوده تعریف کنید، مرورگر محاسبه کند، برای تایپوگرافی و فاصلهگذاری عالی است
برای بیشتر: تایپوگرافی سیال
آزمایش طراحی
بوم سازنده یک پیشنمایش میدهد، اما همیشه روی دستگاههای واقعی یا ابزار توسعهدهنده مرورگر هم آزمایش کنید.
در سازنده: از سوئیچر breakpoint استفاده کنید. همچنین میتوانید لبههای بوم را بکشید تا عرضهای میانی را بررسی کنید.
در مرورگر:
1. روی Preview در نوار ابزار کلیک کنید تا فرانتاند باز شود
2. ابزار توسعهدهنده مرورگر را باز کنید (F12 یا Cmd/Ctrl + Shift + I)
3. Responsive Design Mode را فعال کنید
4. در عرضهای مختلف آزمایش کنید
آزمایش روی دستگاه واقعی چیزهایی نشان میدهد که شبیهسازی از دست میدهد — اندازه هدف لمسی، خوانایی واقعی فونت، عملکرد در گوشیهای کندتر.
Breakpointهای سفارشی
چهار breakpoint پیشفرض Bricks اکثر سایتها را پوشش میدهد. اگر به breakpoint در عرض خاصی نیاز دارید (مثلاً دسکتاپ پهن در ۱۴۴۰px)، میتوانید اضافه کنید.
به Bricks > Settings > General بروید، Custom breakpoints را فعال کنید، سپس از breakpoint manager در سازنده آن را اضافه کنید.
عیبیابی
تغییرات در فرانتاند نمایش داده نمیشوند.
صفحه را ذخیره کنید، سپس مرورگر را hard refresh کنید (Cmd/Ctrl + Shift + R).
وقتی breakpoint را تغییر میدهم، استایلهای desktop هم تغییر میکنند. احتمالاً قبلاً همان استایل را در breakpoint کوچکتر override کردهاید. وراثت فقط به پایین جاری میشود — تغییرات موبایل روی دسکتاپ تأثیر نمیگذارد.
طرحبندی بین دو breakpoint میشکند. عرضهایی مثل ۸۵۰px (بین Tablet portrait 992px و Mobile landscape 768px) را آزمایش کنید. اگر چیزی شکست، طرحبندی را انعطافپذیرتر کنید یا یک breakpoint سفارشی اضافه کنید.
آنچه یاد گرفتید
- breakpointها چگونه کار میکنند و استایلها چگونه به پایین به ارث میرسند
- نحوه تنظیم فاصله و چیدمان عمودی ستونها در صفحههای کوچکتر
- نحوه مخفی کردن المانها در breakpointهای خاص
- دو رویکرد مقادیر واکنشگرا: override دستی در برابر مقیاسبندی سیال
- نحوه آزمایش طراحی در اندازههای مختلف
مسیر بعدی: کلاسهای سراسری (Global classes)