यह आलेख टेलविंड सीएसएस में ब्रेकप्वाइंट और मीडिया प्रश्नों के साथ 'ब्रेक-आफ्टर' का उपयोग करने की विधि प्रदर्शित करेगा।
टेलविंड में ब्रेकप्वाइंट और मीडिया क्वेरीज़ के साथ 'ब्रेक-आफ्टर' का उपयोग कैसे करें?
ब्रेकप्वाइंट और मीडिया प्रश्नों के साथ 'ब्रेक-आफ्टर' का उपयोग करने के लिए, HTML प्रोग्राम में 'ब्रेक-आफ्टर' उपयोगिता के साथ विभिन्न स्क्रीन आकारों के लिए अलग-अलग मान और स्टाइल को परिभाषित करें। फिर, HTML वेब पेज देखकर आउटपुट सत्यापित करें।
आइए व्यावहारिक कार्यान्वयन का पता लगाएं:
चरण 1: 'ब्रेक-आफ्टर' उपयोगिता के साथ ब्रेकप्वाइंट और मीडिया क्वेरीज़ का उपयोग करें
एक HTML प्रोग्राम बनाएं और 'ब्रेक-आफ्टर' उपयोगिता के साथ विभिन्न स्क्रीन आकारों के लिए अलग-अलग मान और स्टाइल निर्दिष्ट करें। उदाहरण के लिए, हमने 'का उपयोग किया है एमडी 'के साथ ब्रेकप्वाइंट' ब्रेक-आफ्टर-कॉलम 'उपयोगिता और' एलजी 'के साथ ब्रेकप्वाइंट' तोड़ना-परखना ' उपयोगिता:
< शरीर >
< डिव कक्षा = 'कॉलम-2 बीजी-टील-400' >
< पी कक्षा = 'एमडी: ब्रेक-आफ्टर-कॉलम एलजी: ब्रेक-आफ्टर-अवॉइड' > नमस्ते... < / पी >
< पी > यहाँ स्वागत है... < / पी >
< पी > टेलविंड सीएसएस के बारे में जानें... < / पी >
< पी > यह एक सीएसएस ढांचा है... < / पी >
< पी > अलविदा... < / पी >
< / डिव >
< / शरीर >
यहाँ:
- “ एमडी: ब्रेक-आफ्टर-कॉलम 'वर्ग इंगित करता है कि इस विशिष्ट
तत्व के बाद एक कॉलम ब्रेक होना चाहिए' एमडी ” ब्रेकप्वाइंट (मध्यम स्क्रीन आकार)।
- “ एलजी: ब्रेक-आफ्टर-अवॉइड ' वर्ग सुझाव देता है कि तत्व को ' पर ब्रेक-आफ्टर से बचना चाहिए एलजी ” ब्रेकप्वाइंट (बड़ी स्क्रीन का आकार)।
चरण 2: आउटपुट सत्यापित करें
HTML वेब पेज को देखकर सत्यापित करें कि ब्रेकप्वाइंट और मीडिया क्वेरी लागू की गई हैं या नहीं:
उपरोक्त वेब पेज में, मध्यम स्क्रीन पर निर्दिष्ट तत्व पर कॉलम ब्रेक हुआ है, और बड़ी स्क्रीन पर ब्रेक-आफ्टर से बचा गया है।
निष्कर्ष
टेलविंड में ब्रेकप्वाइंट और मीडिया प्रश्नों के साथ 'ब्रेक-आफ्टर' का उपयोग करने के लिए, सबसे पहले, एक HTML फ़ाइल बनाएं। फिर, विभिन्न स्क्रीन आकारों के लिए अलग-अलग मान और स्टाइल निर्दिष्ट करके 'ब्रेक-आफ्टर' उपयोगिता के साथ ब्रेकप्वाइंट और मीडिया क्वेरी का उपयोग करें। सत्यापन के लिए, HTML प्रोग्राम चलाएँ और वेब पेज देखें। इस आलेख ने टेलविंड सीएसएस में ब्रेकप्वाइंट और मीडिया प्रश्नों के साथ 'ब्रेक-आफ्टर' का उपयोग करने की विधि का प्रदर्शन किया है।