टेलविंड में स्थिति संपत्ति के साथ ब्रेकप्वाइंट और मीडिया क्वेरी का उपयोग कैसे करें?

यह आलेख बताएगा कि टेलविंड में स्थिति संपत्ति के साथ ब्रेकप्वाइंट और मीडिया क्वेरी का उपयोग कैसे करें।

स्थिति संपत्ति के साथ ब्रेकप्वाइंट और मीडिया क्वेरीज़ का उपयोग कैसे करें?

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

चरण 1: ब्रेकप्वाइंट और मीडिया क्वेरीज़ के साथ स्थिति संपत्ति को लागू करना
इस चरण में, प्रोग्राम को चयनित 'पर ब्रेकप्वाइंट या मीडिया प्रश्नों के साथ स्थिति संपत्ति लागू करने के लिए डाला गया है' पी ' तत्व:

इस कोड में:

• “ बीजी-स्लेट-500 'पृष्ठभूमि का रंग ग्रे पर सेट करता है।
• “ पाठ-पीला-300 ” टेक्स्ट का रंग पीला कर देता है।
• “ पी 4 ” 4px की पैडिंग जोड़ता है।
• “ एलजी: पी-8' बड़ी स्क्रीन पर 8px की पैडिंग जोड़ता है।
• प्रारंभिक स्थिति 'का उपयोग करके मूल पृष्ठ के सापेक्ष सेट की गई है' रिश्तेदार ' कक्षा।
• “ एमडी: टेक्स्ट-एलजी मध्यम आकार की स्क्रीन पर टेक्स्ट को बड़ा बनाता है।
• 'एमडी: पूर्ण' मध्यम आकार की स्क्रीन पर टेक्स्ट की स्थिति को सापेक्ष से निरपेक्ष तक संशोधित करता है।
• “ एमडी:अनुवाद-x-4” और “एमडी:अनुवाद-वाई-4” मध्यम स्क्रीन आकार पर टेक्स्ट को 4px नीचे और दाईं ओर ले जाएँ।
• “ एलजी: टेक्स्ट-एक्सएल बड़े आकार की स्क्रीन पर टेक्स्ट का आकार अतिरिक्त-बड़े में बदल जाता है।
• “ एलजी: स्थिर बड़े आकार की स्क्रीन पर मूल पृष्ठ के संबंध में पाठ की स्थिति को निरपेक्ष से स्थिर में बदल देता है
• “ एलजी:अनुवाद-एक्स-4 ' और ' एलजी:अनुवाद-वाई-4 बड़े स्क्रीन आकार पर टेक्स्ट को 4px नीचे और दाईं ओर ले जाएं।

चरण 2: आउटपुट सत्यापित करें
उपरोक्त कोड द्वारा बनाए गए वेबपेज का पूर्वावलोकन करें और परिवर्तन देखने के लिए स्क्रीन आकार को समायोजित करें:

यह देखा जा सकता है कि टेक्स्ट मध्यम और बड़े स्क्रीन आकार पर प्रतिक्रियाशील व्यवहार दिखाता है।

निष्कर्ष

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