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

यहाँ:

• “ बीजी-टील-600 ” पृष्ठभूमि पर चैती रंग सेट करता है।
• “ बॉक्स-सजावट-क्लोन ' एक कस्टम क्लास है जिसका उपयोग क्लोनिंग बॉक्स सजावट के लिए किया जाता है।
• “ एमडी:बीजी-पीला-500 ' के लिए तत्व पर एक पीला पृष्ठभूमि रंग लागू करता है एमडी ब्रेकप्वाइंट (मध्यम आकार की स्क्रीन)।
• “ एलजी: बॉक्स-सजावट-स्लाइस 'बॉक्स सजावट के लिए एक स्लाइसिंग प्रभाव सेट करता है' एलजी ब्रेकप्वाइंट (बड़ी स्क्रीन)।
• “ पाठ-सफ़ेद ” टेक्स्ट में सफ़ेद रंग सेट करता है।
• “ टेक्स्ट-3xl फ़ॉन्ट आकार को 3xl पर सेट करता है।
• “ पीएक्स-2 तत्व में 2 पिक्सेल की क्षैतिज पैडिंग जोड़ता है।

चरण 2: आउटपुट सत्यापित करें

यह सुनिश्चित करने के लिए कि ब्रेकप्वाइंट और मीडिया क्वेरी सफलतापूर्वक लागू की गई हैं, HTML प्रोग्राम चलाएं और वेब पेज देखें:

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

निष्कर्ष

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