टेलविंड में ओवरस्क्रॉल के साथ मीडिया क्वेरीज़ और ब्रेकप्वाइंट कैसे लागू करें?

इस कोड में:

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

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

उपरोक्त स्क्रीन में, ' ओवरस्क्रॉल व्यवहार दिखाई देता है और स्क्रीन का आकार कम करके यह देखा जा सकता है कि उस पर लागू मीडिया प्रश्नों द्वारा पाठ का आकार बदल जाता है।

निष्कर्ष

मीडिया प्रश्नों और ब्रेकप्वाइंट को 'के साथ लागू करने के लिए' ओवरस्क्रॉल ” उपयोगिता, “ओवरस्क्रॉल” उपयोगिता से कुछ वांछित वर्ग के साथ ब्रेकप्वाइंट निर्दिष्ट करें। स्क्रीन का आकार बदलकर मीडिया क्वेरीज़ स्क्रीन के आउटपुट को समायोजित करती हैं। इस ब्लॉग ने टेलविंड में 'ओवरस्क्रॉल' व्यवहार के साथ मीडिया प्रश्नों और ब्रेकप्वाइंट को लागू करने की प्रक्रिया का प्रदर्शन किया है।