रिस्पॉन्सिव डिज़ाइन

सबसे सही तरीके

• @container क्वेरी का इस्तेमाल करके, कॉम्पोनेंट के हिसाब से रिस्पॉन्सिव लेआउट बनाएं. ये लेआउट, व्यूपोर्ट के बजाय अपने पैरंट कंटेनर के साइज़ के हिसाब से अडजस्ट होते हैं. ज़्यादा जानकारी के लिए, साइज़ के हिसाब से स्टाइलिंग देखें.
• vh/vw के बजाय डाइनैमिक व्यूपोर्ट यूनिट (dvh, dvw) का इस्तेमाल करें. इससे मोबाइल ब्राउज़र के यूज़र इंटरफ़ेस (यूआई) एलिमेंट (जैसे, पता बार) दिखने या गायब होने पर, लेआउट को खराब होने से बचाया जा सकता है.
• <img> और <video> जैसे मीडिया एलिमेंट के लिए, aspect-ratio का इस्तेमाल करें. इससे पेज लोड होने के दौरान, मीडिया एलिमेंट के लिए जगह रिज़र्व हो जाती है और लेआउट शिफ़्ट होने में लगने वाले समय (सीएलएस) को कम किया जा सकता है.

रिस्पॉन्सिव यूज़र इंटरफ़ेस (फ़्लेक्सबॉक्स, ग्रिड, कंटेनर क्वेरी यूनिट, व्यूपोर्ट यूनिट) के पीछे मौजूद लेआउट मैकेनिक्स के बारे में जानने के लिए, सीएसएस लेआउट और रिस्पॉन्सिव डिज़ाइन देखें.

रिस्पॉन्सिव टाइपोग्राफ़ी

• DO combine viewport-relative and font-relative units in clamp() for font sizes that scale with the viewport size while ensuring they stay within a desired range. उदाहरण के लिए, clamp(2rem, 1rem + 5vw, 4rem). फ़ॉन्ट-साइज़ में होने वाले बदलावों की स्पीड को कंट्रोल करने के लिए, व्यूपोर्ट और फ़ॉन्ट के हिसाब से तय की गई यूनिट के अनुपात को अडजस्ट करें.
• clamp() के बिना, फ़ॉन्ट साइज़ के लिए सिर्फ़ vw का इस्तेमाल न करें. ऐसा करने से, बहुत छोटी या बहुत बड़ी स्क्रीन पर टेक्स्ट बहुत छोटा या बहुत बड़ा दिख सकता है.

व्यूपोर्ट के बजाय कंटेनर के साथ टाइप और स्पेसिंग को स्केल करने के लिए, फ़्लूइड स्केलिंग देखें.