كيف تعمل breakpoints في Framer، وكيف توقف انكسار صفحتك على الجوال

تأتي breakpoints في Framer بثلاثة أحجام: Desktop وTablet وPhone. تبني على Desktop، وتنساب تغييراتك إلى الحجمين الأصغر. وحين تغيّر شيئًا على حجم أصغر يصير override يبقى في مكانه. وكل عطل جوال في Framer تقريبًا يعود إلى شيء واحد، عرض ثابت بالبكسل لم يحوّله أحد إلى ملء المساحة.

ما الذي تعنيه breakpoints الثلاثة فعلًا

صفحات Framer نفسها تُظهر تبويبات الكانفس باسمَي Desktop 1200 وTablet 810. والكود المنشور على framer.com يقول الشيء نفسه. فصوره المتجاوبة تُقدَّم بثلاث قواعد: min-width 1200px، ثم 810px حتى 1199.98px، ثم max-width 809.98px. أي أن Desktop يغطي 1200 وما فوق. وTablet يغطي نحو 810 إلى 1199. وPhone يغطي كل ما دون 810. وتخطيطك عليه أن ينجو من الخطوط الثلاثة كلها.

التغييرات تنساب نزولًا، وoverrides لا تصعد

عدّل على Desktop وينساب التغيير إلى Tablet وPhone. وعدّل على Phone وتكون قد صنعت override يعيش هناك وحده. ويبرز Framer كل خاصية تجاوزتها، لأن قيمتها لم تعد تطابق الـ breakpoint الأساسي فتتوقف عن وراثة التغييرات. وللتراجع عن واحدة، اضغط اسم الخاصية ثم Reset Override. ولهذا تنهي تخطيط Desktop أولًا ثم تفتح Phone. فكل override تضبطه مبكرًا أكثر من اللازم هو تغيير ستجريه مرتين.

العروض الثابتة هي سبب خروج الصفحة عن حدودها

لدى Framer مقالة قصيرة عن حل هذه المشكلة، وهي تصيب فيها. إن كان موقعك لا يملأ الشاشة عند مقاس Phone، فغالبًا هناك عنصر واحد أعرض من شاشة الجوال. ابحث عن أمرين. عرض ثابت، مثل 321px، في مكان أردت فيه 100 بالمئة أو 1fr. وMax Width أكبر من شاشة جوال. أصلح الاثنين في قسم Size داخل اللوحة اليمنى. اضبط Width على 100 بالمئة أو 1fr، وانزع Max Width عن كل شيء عدا حاوية المحتوى عندك. ثم أعد النشر، لأن تغييرات الكانفس لا تصل إلى الموقع الحي إلا حين تنشر.

اتجاه التكديس والحشو يتوليان الباقي

على Phone، معظم الأكوام الأفقية تحتاج أن تصير رأسية. اختر الكومة، واقلب الاتجاه، وقلّل الفجوة عن قيمتها على سطح المكتب. ثم قلّل حشو الأقسام. و120 بكسل من أعلى وأسفل تبدو كريمة على سطح المكتب وتبدو شاشة فارغة على الجوال. و80 بكسل من الحشو الجانبي تترك زائر الجوال يقرأ شريطًا ضيقًا من النص. و40 و20 نقطتا انطلاق معقولتان. امشِ على كل قسم عند مقاس Phone وقلّص كل ما يجعل الزائر يمرّر فوق فراغ.

الخطوط تحتاج جولة خاصة بها

عنوان بحجم 64 بكسل يلتف على ست أسطر في الجوال ويدفع زرك تحت الشاشة الأولى. أصلحه مرة واحدة في نمط النص، لا طبقة طبقة. افتح Assets في الشريط الجانبي الأيسر، وافتح النمط، وفي نافذة Edit Style ابحث عن قسم Breakpoints واضغط Add Breakpoint. يعطيك Framer خيارات Desktop (L) وTablet (M) وMobile (S). ولكل واحد منها تستطيع ضبط حجم الخط وارتفاع السطر وتباعد الحروف وتباعد الفقرات. اضبط H1 هناك مرة واحدة وسيتبعه كل H1 في الموقع.

اختبرها بالطريقة التي سيراها بها الزوار

ملاحظة أولى. يجعل Framer الـ breakpoint غير متاح حين يكون أعرض من نافذة متصفحك أو من دقة شاشتك، فعلى لابتوب صغير قد تصير معاينة Desktop رمادية. وحل Framer هو توسيع النافذة أو الانتقال إلى شاشة أكبر أو النشر والمعاينة على الرابط الحي. ثم أجرِ الاختبار الحقيقي في متصفح. اسحب النافذة ببطء من واسعة إلى ضيقة. وراقب النقطة التي يتوقف عندها صف عن الاتساع، وأصلحها هناك بدل حدود الـ breakpoint. بعدها افتح الرابط الحي على جوالك أنت، عبر بيانات الجوال، ومرّر الصفحة كلها. فمحاكاة الأجهزة لن تريك شبكة بطيئة ولا شريط أدوات متصفح داخل تطبيق.

جولة تجاوب في عشر دقائق

اعمل من أعلى إلى أسفل، قسمًا واحدًا في كل مرة. اضبط كل حاوية على 100 بالمئة أو 1fr. أبقِ Max Width واحدًا فقط، على حاوية المحتوى. اقلب الأكوام الأفقية إلى رأسية على Phone. قلّل حشو الأقسام إلى النصف. أضف أحجام الـ breakpoints إلى أنماط H1 وH2 ونص المتن. أعد النشر، وافتح الصفحة على جوال، وتأكد أنك ترى الزر الأول دون تمرير. هذه الجولة تلتقط معظم ما يعطل الصفحة، وبعد أن تكررها بضع مرات تستغرق نحو عشر دقائق للصفحة.