यह आलेख टेलविंड में 'स्पष्ट' उपयोगिताओं पर ब्रेकप्वाइंट और मीडिया प्रश्नों को लागू करने की विधि का उदाहरण देगा।
टेलविंड में 'क्लियर' पर ब्रेकप्वाइंट और मीडिया क्वेरीज़ का उपयोग कैसे करें?
टेलविंड में 'स्पष्ट' उपयोगिताओं पर विशेष ब्रेकप्वाइंट और मीडिया क्वेरी लागू करने के लिए, एक HTML संरचना बनाएं। फिर, वांछित मान को 'पर परिभाषित करें' स्पष्ट-<मूल्य> 'विभिन्न स्क्रीन आकारों के लिए उपयोगिता' का उपयोग करना एमडी ' या ' एलजी “ब्रेकप्वाइंट. अंत में, सत्यापन के लिए वेब पेज का स्क्रीन आकार बदलें।
उदाहरण
इस उदाहरण में, हम 'का उपयोग करेंगे एमडी 'के साथ ब्रेकप्वाइंट' दोनों को साफ करो 'उपयोगिता और' एलजी 'के साथ ब्रेकप्वाइंट' स्पष्ट-कोई नहीं 'में उपयोगिता' <पी> मध्यम और बड़े स्क्रीन आकार पर अपनी स्थिति बदलने के लिए 'तत्व:
< शरीर >
< डिव कक्षा = 'एच-96 एमएक्स-10 पी-8 बीजी-स्काई-500' >
< आईएमजी स्रोत = 'tailwindcss_img.png' कक्षा = 'फ्लोट-बाएं पी-3 डब्ल्यू-28 एच-24' सब कुछ = 'छवि' / >
< आईएमजी स्रोत = 'tailwindcss_img.png' कक्षा = 'फ्लोट-राइट पी-3' सब कुछ = 'छवि' / >
< पी कक्षा = 'टेक्स्ट-जस्टिफ़ाई क्लियर-लेफ्ट एमडी: क्लियर-दोनों एलजी: क्लियर-कोई नहीं' > टेलविंड सीएसएस किसी तत्व के चारों ओर सामग्री की रैपिंग को नियंत्रित करने के लिए 'फ्लोट्स' उपयोगिताएँ प्रदान करता है।
यह उदाहरण दिखाएगा कि टेलविंड में 'स्पष्ट' उपयोगिता के साथ ब्रेकप्वाइंट और मीडिया क्वेरी का उपयोग कैसे करें। < / पी >
< / डिव >
< / शरीर >
यहाँ:
- 'नाव छोड़ी' क्लास तत्वों को कंटेनर के बाईं ओर तैराता है।
- 'सही नाव' क्लास तत्वों को कंटेनर के दाईं ओर तैराता है।
- “स्पष्ट-बाएँ” क्लास
तत्व को कंटेनर में बाएँ-फ़्लोटेड तत्व के नीचे ले जाता है।
- 'एमडी: साफ़-दोनों' क्लास बाएँ और दाएँ दोनों फ़्लोट्स को साफ़ करता है और
तत्व को उनके नीचे मध्यम स्क्रीन आकार पर रखता है।
- 'एलजी:स्पष्ट-कोई नहीं' क्लास
तत्व पर लागू किसी भी स्पष्ट को अक्षम कर देता है और तत्व को बड़े स्क्रीन आकार में कंटेनर के दोनों किनारों पर तैरने की अनुमति देता है।
उत्पादन
उपरोक्त आउटपुट के अनुसार, निर्दिष्ट ब्रेकप्वाइंट और मीडिया क्वेरीज़ को 'स्पष्ट' उपयोगिता पर सफलतापूर्वक लागू किया गया है।
निष्कर्ष
टेलविंड में 'स्पष्ट' उपयोगिताओं पर ब्रेकप्वाइंट और मीडिया प्रश्नों को लागू करने के लिए, वांछित मान को 'पर परिभाषित करें' स्पष्ट-<मूल्य> 'का उपयोग करके विभिन्न स्क्रीन आकारों के लिए उपयोगिता' एमडी ' या ' एलजी “ब्रेकप्वाइंट. सत्यापन के लिए, वेब पेज का स्क्रीन आकार बदलें और परिवर्तन सुनिश्चित करें। इस आलेख ने टेलविंड में 'स्पष्ट' उपयोगिताओं पर विशिष्ट ब्रेकप्वाइंट और मीडिया प्रश्नों को लागू करने के लिए उदाहरण प्रदर्शित किया है।