نقاط شکست مناسب برای طراحی سایت ریسپانسیو
در فرآیند طراحی سایت ریسپانسیو چندین نقطه شکست یا Breakpoint تعریف می‌شود که اگر عرض صفحه کمتر یا بیشتر از این نقاط باشد، تغییراتی در ظاهر سایت انجام می‌شوند. این تغییرات می‌توانند یکی از موارد زیر باشند:
- به نمایش در آمدن بخش‌هایی از سایت
- مخفی شدن بخش‌هایی از سایت
- تغییر اندازه بعضی عناصر
- تغییر شکل بعضی عناصر
- تغییر ترتیب عناصر
با توجه به طراحی سیستم‌های کامپیوتری بر اساس اصول صفر و یک، لازم است تا نقاطی که این تغییرات به وقوع می‌پیوندند، به طور دقیق مشخص باشند. برای مثال اگر عرض صفحه کمتر از ۶۴۰ پیکسل بود، یک عنصر از صفحه مخفی شود.
در طراحی سایت واکنش گرا، به نقاطی که این تغییرات رخ می‌دهند، Responsive Breakpoint یا نقطه شکست گفته واکنش‌گرایی می‌شود.
امکان تعریف عددهای دقیق و بهینه برای تمامی حالت‌ها وجود ندارد با این حال چند نوع از پیشنهادهایی که توسط متخصصین پیشنهاد شده‌اند را در ادامه بررسی می‌کنیم.
پیشنهادهای شرکت یاهو در فریم‌ورک Pure
اندازه‌های صفحه در فریم‌ورک Pure بر اساس واحد em تعیین می‌شود که می‌تواند بسته به اندازه‌ی فونت خود متغیر باشد. اندازه هر em به صورت پیش‌فرض در مرورگرها ۱۶ پیکسل است ولی بسته به شرایط این مقدار می‌تواند تغییر کند.
- کوچک: بیشتر از ۳۵.۵ واحد
- متوسط: بیشتر از ۴۸ واحد
- بزرگ: بیشتر از ۶۴ واحد
- خیلی بزرگ: بیشتر از ۸۰ واحد
اندازه‌های شکست صفحه در فریم‌ورک بوت استرپ( Bootstrap )
سایزهای صفحه در فریم‌ورک بوت استرپ مقادیر زیر می‌باشند:
- کوچک: بیشتر از ۵۷۶ پیکسل
- متوسط: بیشتر از ۷۶۸ پیکسل
- بزرگ: بیشتر از ۹۹۲ پیکسل
- خیلی بزرگ: بیشتر از ۱۲۰۰ پیکسل
پیشنهادهای شرکت مایکروسافت برای UWP
مایکروسافت پیشنهاد می‌کند که از سه اندازه‌ی زیر برای طراحی سایت ریسپانسیو استفاده شود:
- کوچک: کمتر از ۶۴۰ پیکسل
- متوسط: ۶۴۱ تا ۱۰۰۷ پیکسل
- بزرگ: بزرگتر از ۱۰۰۸ پیکسل
این عددها دقیقا به چه معنی است ؟
برای مثال مایکروسافت عرض کمتر از ۶۴۰ پیکسل را کوچک در نظر می‌گیرد. در این ابعاد، ممکن است بخواهید شکل نمایش منوهای سایت را از حالت افقی به همبرگری تغییر دهید. یا عرض ۱۰۰۸ پیکسل از نظر مایکروسافت اندازه‌ی بزرگ است. ممکن است بخواهید در این اندازه و بزرگتر، تبلیغات بنری که شکل عمودی دارند را به شکل افقی نمایش دهید.
تعریف قوانین Breakpoint در CSS
با استفاده از دستورالعمل media به شکل زیر می‌توانیم نقاط شکست بر اساس مقادیر مایکروسافت را پیاده‌سازی می‌کنیم:
استایل‌های مخصوص به صفحه‌نمایش‌های کوچک
|
1 2 3 4 5 6 7 8 |
@media (max-width: 639px) { body { background-color: lightblue; } h1 { font-size: 20px; } } |
استایل‌های مخصوص به صفحه‌نمایش‌های متوسط
|
1 2 3 4 5 6 7 8 |
@media (min-width: 640px) and (max-width: 1007px) { body { background-color: lightgreen; } h1 { font-size: 24px; } } |
استایل‌های مخصوص به صفحه‌نمایش‌های بزرگ
|
1 2 3 4 5 6 7 8 |
@media (min-width: 1008px) { body { background-color: lightcoral; } h1 { font-size: 28px; } } |