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

यह लेख टेलविंड सीएसएस में प्रतिक्रियाशील ब्रेकप्वाइंट का उपयोग करने की विधि का वर्णन करेगा।

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

टेलविंड में रिस्पॉन्सिव ब्रेकप्वाइंट का उपयोग करने के लिए, रिस्पॉन्सिव संशोधक का उपयोग करें, जैसे ' एस.एम ”,“ एमडी ”,“ एलजी ”,“ एक्स्ट्रा लार्ज ' और ' 2xl HTML प्रोग्राम में अन्य कक्षाओं के साथ। फिर, HTML वेब पेज देखें और यह सुनिश्चित करने के लिए स्क्रीन का आकार बदलें कि ब्रेकप्वाइंट ठीक से काम कर रहे हैं।

चरण 1: HTML प्रोग्राम में रिस्पॉन्सिव संशोधक का उपयोग करें
एक HTML प्रोग्राम बनाएं और वांछित स्टाइल के साथ प्रतिक्रियाशील संशोधक का उपयोग करें। उदाहरण के लिए, हमने 'का उपयोग किया है एस.एम ”,“ एमडी ”,“ एलजी ”,“ एक्स्ट्रा लार्ज ' और ' 2xl 'उत्तरदायी संशोधक:

यहाँ:

• “ बीजी-फ्यूशिया-400 क्लास का पृष्ठभूमि रंग सेट करता है फुकिया को.
• “ एसएम:बीजी-गुलाबी-600 क्लास छोटे स्क्रीन के लिए पृष्ठभूमि पर गुलाबी रंग लागू करता है।
• “ एमडी:बीजी-ग्रीन-700 क्लास मध्यम स्क्रीन पर पृष्ठभूमि का रंग हरा में बदल देती है।
• “ एलजी:बीजी-बैंगनी-50 क्लास बड़ी स्क्रीन के लिए पृष्ठभूमि का रंग बैंगनी पर सेट करता है।
• “ एक्सएल:बीजी-टील-600 क्लास अतिरिक्त बड़ी स्क्रीन के लिए पृष्ठभूमि पर चैती रंग लागू करता है।
• “ 2xl:बीजी-पीला-500 'क्लास 2xl स्क्रीन पर पृष्ठभूमि का रंग पीला में बदल देता है।

चरण 2: आउटपुट सत्यापित करें
यह सत्यापित करने के लिए HTML वेब पेज देखें कि प्रतिक्रियाशील ब्रेकप्वाइंट ठीक से काम कर रहे हैं या नहीं:

---





---



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





निष्कर्ष

टेलविंड में रिस्पॉन्सिव ब्रेकप्वाइंट का उपयोग करने के लिए, रिस्पॉन्सिव संशोधक का उपयोग करें, जैसे ' एस.एम ”,“ एमडी ”,“ एलजी ”,“ एक्स्ट्रा लार्ज ' और ' 2xl HTML प्रोग्राम में अन्य कक्षाओं के साथ। इन संशोधकों का उपयोग स्क्रीन आकार के आधार पर किसी विशेष तत्व पर विभिन्न शैलियों को लागू करने के लिए किया जाता है। इस लेख में टेलविंड सीएसएस में प्रतिक्रियाशील ब्रेकप्वाइंट का उपयोग करने की विधि का उदाहरण दिया गया है।