نقاط شکست مناسب برای طراحی سایت ریسپانسیو
در هنگام طراحی سایت ریسپانسیو لازم است تا بر اساس اندازه‌های مختلف صفحه، شکل طراحی سایت تغییراتی داشته باشد. این تغییرات می‌توانند شامل موارد زیر باشند:
- به نمایش در آمدن
- مخفی شدن
- تغییر اندازه
- تغییر شکل
- تغییر ترتیب
با توجه به طراحی سیستم‌های کامپیوتری بر اساس اصول صفر و یک، لازم است تا نقاطی که این تغییرات به وقوع می‌پیوندند، به طور دقیق مشخص باشند. برای مثال اگر عرض صفحه کمتر از ۶۴۰ پیکسل بود، یک عنصر از صفحه مخفی شود.
در طراحی سایت واکنش گرا، به نقاطی که این تغییرات رخ می‌دهند، Responsive Breakpoint یا نقطه شکست گفته واکنش‌گرایی می‌شود.
امکان تعریف عددهای دقیق و بهینه برای تمامی حالت‌ها وجود ندارد با این حال چند نوع از پیشنهادهایی که توسط شرکت‌های مهم پیشنهاد شده‌اند را در ادامه مرور می‌کنیم:
پیشنهادهای شرکت یاهو در فریم‌ورک Pure
اندازه‌های صفحه در فریم‌ورک Pure بر اساس واحد em تعیین می‌شود که می‌تواند بسته به اندازه‌ی فونت خود متغیر باشد. اندازه هر em به صورت پیش‌فرض در مرورگرها ۱۶ پیکسل است ولی بسته به شرایط این مقدار می‌تواند تغییر کند.
- کوچک: بیشتر از ۳۵.۵ واحد
- متوسط: بیشتر از ۴۸ واحد
- بزرگ: بیشتر از ۶۴ واحد
- خیلی بزرگ: بیشتر از ۸۰ واحد
اندازه‌های شکست صفحه در فریم‌ورک بوت استرپ( Bootstrap )
سایزهای صفحه در فریم‌ورک بوت استرپ مقادیر زیر می‌باشند:
- کوچک: بیشتر از ۵۷۶ پیکسل
- متوسط: بیشتر از ۷۶۸ پیکسل
- بزرگ: بیشتر از ۹۹۲ پیکسل
- خیلی بزرگ: بیشتر از ۱۲۰۰ پیکسل
پیشنهادهای شرکت مایکروسافت برای UWP
مایکروسافت پیشنهاد می‌کند که از سه اندازه‌ی زیر برای طراحی سایت ریسپانسیو استفاده شود:
- کوچک: کمتر از ۶۴۰ پیکسل
- متوسط: ۶۴۱ تا ۱۰۰۷ پیکسل
- بزرگ: بزرگتر از ۱۰۰۸ پیکسل