यह आलेख टेलविंड सीएसएस में पंक्ति ग्रिड पर ब्रेकप्वाइंट और मीडिया क्वेरी लागू करने की विधि का उदाहरण देगा।
टेलविंड में रो ग्रिड पर ब्रेकप्वाइंट और मीडिया क्वेरीज़ कैसे लागू करें?
टेलविंड में पंक्ति ग्रिड पर ब्रेकप्वाइंट और मीडिया क्वेरी लागू करने के लिए, एक HTML प्रोग्राम बनाएं। फिर, 'का उपयोग करके विभिन्न स्क्रीन आकारों के लिए पंक्तियों की संख्या निर्धारित करें' एस.एम ”,“ एमडी ' या ' एलजी ' के साथ ब्रेकप्वाइंट ग्रिड-पंक्तियाँ-<मान> ” उपयोगिताएँ। इसके बाद, स्क्रीन आकार को समायोजित करके वेब पेज पर परिवर्तन सुनिश्चित करें।
आइए व्यावहारिक कार्यान्वयन का पता लगाएं:
चरण 1: HTML प्रोग्राम में रो ग्रिड के साथ ब्रेकप्वाइंट और मीडिया क्वेरीज़ का उपयोग करें
एक HTML प्रोग्राम बनाएं और विभिन्न स्क्रीन आकारों के लिए पंक्तियों की संख्या को परिभाषित करें ' ग्रिड-पंक्तियाँ-<मान> ' उपयोगिता। उदाहरण के लिए, हमने 'का उपयोग किया है एमडी 'के साथ ब्रेकप्वाइंट' ग्रिड-पंक्तियाँ-3 'उपयोगिता और' एलजी ' के साथ ब्रेकप्वाइंट ग्रिड-पंक्तियाँ-5 विभिन्न स्क्रीन आकारों पर पंक्तियों की संख्या बदलने के लिए उपयोगिताएँ:
< शरीर >
< डिव कक्षा = 'ग्रिड ग्रिड-पंक्तियाँ-2 एमडी:ग्रिड-पंक्तियाँ-3 एलजी:ग्रिड-पंक्तियाँ-5 ग्रिड-फ्लो-कॉल गैप-3 एम-3 टेक्स्ट-सेंटर' >
< डिव कक्षा = 'बीजी-टील-500 पी-5' > 1 < / डिव >
< डिव कक्षा = 'बीजी-टील-500 पी-5' > 2 < / डिव >
< डिव कक्षा = 'बीजी-टील-500 पी-5' > 3 < / डिव >
< डिव कक्षा = 'बीजी-टील-500 पी-5' > 4 < / डिव >
< डिव कक्षा = 'बीजी-टील-500 पी-5' > 5 < / डिव >
< डिव कक्षा = 'बीजी-टील-500 पी-5' > 6 < / डिव >
< डिव कक्षा = 'बीजी-टील-500 पी-5' > 7 < / डिव >
< डिव कक्षा = 'बीजी-टील-500 पी-5' > 8 < / डिव >
< डिव कक्षा = 'बीजी-टील-500 पी-5' > 9 < / डिव >
< डिव कक्षा = 'बीजी-टील-500 पी-5' > 10 < / डिव >
< / डिव >
< / शरीर >
यहाँ:
- “ जाल ग्रिड लेआउट बनाने के लिए क्लास का उपयोग किया जाता है।
- “ ग्रिड-पंक्तियाँ-2 'वर्ग निर्दिष्ट करता है कि ग्रिड में 2 समान आकार की पंक्तियाँ होनी चाहिए।
- “ एमडी:ग्रिड-पंक्तियाँ-3 'वर्ग मध्यम स्क्रीन आकार पर ग्रिड को 3 समान आकार की पंक्तियों में बदलता है।
- “ एलजी: ग्रिड-पंक्तियाँ-5 क्लास बड़े स्क्रीन आकार पर ग्रिड को 5 समान आकार की पंक्तियों में बदल देता है।
- “ ग्रिड-प्रवाह-कर्नल क्लास ग्रिड आइटम को क्षैतिज रूप से कॉलम में रखता है।
- “ गैप -3 क्लास प्रत्येक ग्रिड आइटम के बीच 3 इकाइयों का अंतर निर्धारित करता है।
- “ एम 3 क्लास ग्रिड कंटेनर के चारों ओर 3 इकाइयों का मार्जिन लागू करता है।
- “ पाठ-केंद्र क्लास प्रत्येक ग्रिड आइटम के टेक्स्ट को केंद्र में सेट करता है।
- “ बीजी-टील-500 क्लास ग्रिड आइटम की पृष्ठभूमि पर चैती रंग सेट करता है।
- “ पी-5 कक्षा बच्चे के अंदर की सामग्री में 5 इकाइयों की पैडिंग जोड़ती है
सामान।
चरण 2: आउटपुट सत्यापित करें
यह सुनिश्चित करने के लिए कि ब्रेकप्वाइंट और मीडिया क्वेरीज़ को पंक्ति ग्रिड पर लागू किया गया है, स्क्रीन का आकार बदलकर HTML वेब पेज देखें:
उपरोक्त आउटपुट में, यह देखा जा सकता है कि पंक्तियों की संख्या स्क्रीन आकार के साथ बदलती है। यह इंगित करता है कि ब्रेकप्वाइंट और मीडिया क्वेरीज़ को पंक्ति ग्रिड पर सफलतापूर्वक लागू किया गया है।
निष्कर्ष
टेलविंड में पंक्ति ग्रिड पर ब्रेकप्वाइंट और मीडिया क्वेरी लागू करने के लिए, 'का उपयोग करके विभिन्न स्क्रीन आकारों के लिए पंक्तियों की संख्या परिभाषित करें' एस.एम ”,“ एमडी ' या ' एलजी ' के साथ ब्रेकप्वाइंट ग्रिड-पंक्तियाँ-<मान> ” उपयोगिताएँ। फिर, स्क्रीन का आकार बदलकर वेब पेज पर बदलाव सुनिश्चित करें। इस आलेख में टेलविंड सीएसएस में पंक्ति ग्रिड पर ब्रेकप्वाइंट और मीडिया क्वेरी लागू करने की विधि का उदाहरण दिया गया है।