रिस्पॉन्सिव स्पेसर ब्लॉक आपकी वेबसाइट पर खाली जगह जोड़ता है, जिसे आप विभिन्न इकाइयों में परिभाषित कर सकते हैं। यह आपको स्पेसर को छोटी स्क्रीन पर भी दिखाने की अनुमति देता है जहां बार की ऊंचाई बड़े डेस्कटॉप और छोटे मोबाइल स्क्रीन पर पिक्सेल की समान निश्चित संख्या नहीं होती है।
आप इकाइयों में से चयन कर सकते हैं:
- पीएक्स - पिक्सल में निश्चित ऊंचाई
- vh - व्यूपोर्ट की ऊंचाई के 1% के सापेक्ष (2vh का अर्थ है स्क्रीन की ऊंचाई का 2%)
- vw - व्यूपोर्ट की चौड़ाई के 1% के सापेक्ष (2vw का अर्थ है स्क्रीन की चौड़ाई का 2%)
- रेम - मूल तत्व के फ़ॉन्ट-आकार के सापेक्ष (2rem का अर्थ है रूट फ़ॉन्ट आकार का 2 गुना आकार)
- em - तत्व के फ़ॉन्ट-आकार के सापेक्ष (2em का अर्थ है वर्तमान फ़ॉन्ट आकार का 2 गुना आकार)
- % - मूल तत्व के सापेक्ष (2% का अर्थ है मूल तत्व की ऊंचाई का 2%)
नकारात्मक मूल्य भी संभव हैं. इस तरह स्पेसर के नीचे की सामग्री स्पेसर के ऊपर की सामग्री पर ओवरफ्लो हो सकती है।
रिस्पॉन्सिव डिज़ाइन में, टॉगल के साथ स्पेसर को पूरी तरह से बंद किया जा सकता है प्रतिक्रियाशील में छुपें. 600px से छोटी स्क्रीन पर स्पेसर अक्षम कर दिया जाएगा।