रिस्पॉन्सिव

शायद आपको इस क्षण का डर था लेकिन अब समय आ गया है कि हम अपनी वेबसाइट को रिस्पॉन्सिव बनायें!

अब हमें जो कुछ भी हमने डेस्कटॉप संस्करण के लिए किया था, उसे मोबाइल के लिए फिर से बनाना है!

मज़ाक कर रहा हूँ 🤭, हम कुछ तकनीकों का उपयोग करेंगे ताकि हमारा 3D दृश्य मोबाइल पर अच्छा लगे।

मैं यह बताना चाहूँगा कि 3D दृश्य को रिस्पॉन्सिव बनाने के लिए एक सही समाधान नहीं है। यह कई कारकों पर निर्भर करता है:

• दृश्य की जटिलता
• तत्वों की संख्या
• प्रदर्शन
• आप क्या प्राप्त करना चाहते हैं

CSS भाग के लिए, हम मीडिया क्वेरीज़ के साथ अपनी वेबसाइट को आसानी से रिस्पॉन्सिव बनाएंगे।

useMobile

हम दो तकनीकों का उपयोग करेंगे ताकि हमारा 3D दृश्य रिस्पॉन्सिव बने:

• उपलब्ध चौड़ाई के आधार पर वस्तुओं की मूल स्थिति और पैमाना बदलना। एक निश्चित सीमा के बाद, हम मोबाइल संस्करण में बदल जाएंगे।
• वस्तुओं की स्थिति और पैमाना को scaleFactor के आधार पर ठीक करना। हमारा दृश्य एक 1980px स्क्रीन पर बिल्कुल सही लगता है लेकिन एक 1600px स्क्रीन पर क्या? हम एक scaleFactor का उपयोग करेंगे ताकि विशेष स्थिति और पैमाना को समायोजित करें ताकि वही रूप और अनुभव बना रहे।

चलो एक useMobile हुक बनाते हैं एक 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 हुक का उपयोग कर रहे हैं ताकि scaleFactor और isMobile मानों को स्टोर किया जा सके। जब ये मान बदलते हैं तो यह रीरेंडर को मजबूर करेगा।

हम दो स्थिरांक प्रयोग करते हैं ताकि परफेक्ट चौड़ाई को परिभाषित किया जा सके जिसका उपयोग हमने अपनी वस्तुओं के लिए किया और मोबाइल सीमा (जब हम मोबाइल संस्करण में स्विच करते हैं)।

मैंने इन variables के लिए config का उपयोग नहीं करने का चयन किया ताकि ये हुक अन्य प्रोजेक्ट्स में पुनः उपयोगी हो सके।