Responsive

ربما كنت تخشى هذه اللحظة ولكن حان الوقت لجعل موقعنا قابلاً للاستجابة!

الآن نحتاج إلى إعادة كل شيء فعلناه لإصدار سطح المكتب ولكن للجوال!

فقط أمزح 🤭، سنستخدم بعض التقنيات لجعل مشهدنا الثلاثي الأبعاد يبدو جيدًا على الجوال.

أود أن أؤكد أنه لا يوجد حل واحد مثالي لجعل مشهد ثلاثي الأبعاد قابلاً للاستجابة. فهذا يعتمد على العديد من العوامل:

• تعقيد المشهد
• عدد العناصر
• الأداء
• ما تريد تحقيقه

في الجزء الخاص بـ CSS، سنجعل موقعنا قابلاً للاستجابة بسهولة باستخدام media queries.

useMobile

سنستخدم تقنيتين لجعل مشهدنا الثلاثي الأبعاد قابلاً للاستجابة:

• تغيير الوضع وقاعدة التدرج للعناصر بناءً على العرض المتاح لدينا. بعد تجاوز حد معين، سننتقل إلى النسخة المحمولة.
• ضبط وضع وتدرج العناصر بناءً على scaleFactor. يبدو مشهدنا مثاليًا على شاشة 1980px ولكن ماذا عن شاشة 1600px؟ سنستخدم scaleFactor لضبط وضع وتدرج العناصر للحفاظ على نفس الشكل والشعور.

لنقم بإنشاء useMobile hook في مجلد src/hooks للتعامل مع كلتا التقنيتين:

Copy
import { useState } from "react";

const REFERENCE_WIDTH = 1920;
const MOBILE_THRESHOLD = 990;

export const useMobile = () => {
  const [scaleFactor, setScaleFactor] = useState(
    window.innerWidth / REFERENCE_WIDTH
  );
  const [isMobile, setIsMobile] = useState(
    window.innerWidth <= MOBILE_THRESHOLD
  );
  return {
    scaleFactor,
    isMobile,
  };
};

نحن نستخدم الـ useState hook لتخزين قيم scaleFactor و isMobile. هذا سيؤدي إلى إعادة التصيير عندما تتغير القيم.

نستخدم ثابتين لتعريف العرض المثالي الذي استخدمناه لوضع عناصرنا وحد المحمول (عند التحويل إلى النسخة المحمولة).

اخترت عدم استخدام config لتلك variables لجعل هذا الـ hook قابلاً لإعادة الاستخدام في مشاريع أخرى.