फ़्लूइड स्केलिंग

खास जानकारी

फ़्लूइड स्केलिंग की मदद से, कॉम्पोनेंट अपने मौजूदा डाइमेंशन के आधार पर, अपने अंदरूनी अनुपात (जैसे, फ़ॉन्ट साइज़ और स्पेसिंग) को अडजस्ट कर सकते हैं. इससे, तय किए गए ब्रेकपॉइंट के बीच स्विच करने के बजाय, ज़्यादा बेहतर डिज़ाइन बनता है.

पहले, फ़्लूइड स्केलिंग के लिए व्यूपोर्ट यूनिट का इस्तेमाल किया जाता था. इससे स्क्रीन के साइज़ के हिसाब से स्केलिंग की जाती थी. हालांकि, कंटेनर क्वेरी की आधुनिक यूनिट की मदद से, कॉम्पोनेंट को उनके पैरंट कंटेनर के हिसाब से स्केल किया जा सकता है. इससे यह पक्का होता है कि कॉम्पोनेंट लेआउट में कहीं भी रखे जाने पर अच्छे दिखें. साथ ही, कॉम्पोनेंट को बेहतर तरीके से अलग किया जा सके और उन्हें फिर से इस्तेमाल किया जा सके.

लागू करना

1. कंटेनर तय करना

कंटेनर क्वेरी यूनिट का इस्तेमाल करने के लिए, आपको सबसे पहले पैरंट एलिमेंट पर कंटेनमेंट कॉन्टेक्स्ट तय करना होगा.

.component-wrapper {
  /* Define the container type. Use 'inline-size' for width-based scaling. */
  /* You can also use 'size' for both width and height, but it requires explicit sizing. */
  container-type: inline-size;
  
  /* Optional: Name the container for specific targeting */
  container-name: fluid-card;
}

2. कंटेनर क्वेरी यूनिट का इस्तेमाल करना

कंटेनर के डाइमेंशन के हिसाब से साइज़ सेट करने के लिए, कंटेनर क्वेरी यूनिट (cqi, cqb वगैरह) का इस्तेमाल करें.

• cqi: कंटेनर के इनलाइन साइज़ का 1% (हॉरिज़ॉन्टल राइटिंग मोड में चौड़ाई).
• cqb: कंटेनर के ब्लॉक साइज़ का 1% (हॉरिज़ॉन्टल राइटिंग मोड में ऊंचाई).

ध्यान दें: कंटेनर यूनिट का इस्तेमाल, किसी भी प्रॉपर्टी पर सीधे तौर पर किया जा सकता है. इसके लिए, @container क्वेरी नियम की ज़रूरत नहीं होती. ये अपने-आप लागू हो जाते हैं. इसके लिए, सबसे नज़दीकी पैरंट एलिमेंट को देखा जाता है, जिसके लिए container-type तय किया गया हो.

.component-title {
  /* Scale font size based on container width */
  /* 10cqi means 10% of the container's width */
  font-size: 10cqi;
}

.component-body {
  /* Scale padding based on container width */
  padding: 5cqi;
}

3. clamp() की मदद से वैल्यू को सीमित करना

साइज़ को बहुत छोटा या बहुत बड़ा होने से रोकने के लिए, सीएसएस clamp() फ़ंक्शन का इस्तेमाल करें. इससे उपयोगकर्ता, ज़ूम नहीं कर पाते या अपने बेस फ़ॉन्ट साइज़ में बदलाव नहीं कर पाते. यह पक्का करने के लिए कि टेक्स्ट, सुलभता के दिशा-निर्देशों के मुताबिक हो, टेक्स्ट का ज़्यादा से ज़्यादा साइज़, कम से कम साइज़ से 2.5 गुना से ज़्यादा नहीं होना चाहिए.

.component-title {
  /* Clamp font size between 1rem and 2.5rem, scaling with 5% of container width */
  font-size: clamp(1rem, 5cqi, 2.5rem);
}

फ़ॉलबैक रणनीतियां

अगर ब्राउज़र में कंटेनर क्वेरी काम नहीं करती हैं, तो आपको व्यूपोर्ट यूनिट या स्टैंडर्ड मीडिया क्वेरी का इस्तेमाल करके फ़ॉलबैक देना चाहिए.

.component-title {
  /* Fallback for browsers that do not support container units */
  font-size: clamp(1rem, 5vw, 2.5rem);
}

@supports (font-size: 1cqi) {
  .component-title {
    /* Use container units where supported */
    font-size: clamp(1rem, 5cqi, 2.5rem);
  }
}

इस फ़ॉलबैक से यह पक्का होता है कि टेक्स्ट अब भी स्केल हो, लेकिन यह कॉम्पोनेंट की चौड़ाई के बजाय स्क्रीन की चौड़ाई पर आधारित होगा. इसकी जांच करके यह पुष्टि की जानी चाहिए कि यह आपके इस्तेमाल के उदाहरण में काम करता है या नहीं.