एक प्रतिक्रियाशील वेबसाइट डिज़ाइन करते समय, टेलविंड ' ब्रेकप्वाइंट ' और ' मीडिया के प्रश्नों “कई कार्यात्मकताओं को लागू करने में महत्वपूर्ण भूमिका निभाते हैं जिन्हें विभिन्न स्क्रीन आकारों में आसानी से अनुकूलित किया जा सकता है। इन सुविधाओं को विभिन्न वर्गों के माध्यम से निर्दिष्ट किया जाना है, अर्थात, ' एमडी (मध्यम आकार की स्क्रीन)”, “एलजी (बड़े आकार की स्क्रीन)” या “@मीडिया” के माध्यम से 'नियम जो निर्दिष्ट स्थिति के आधार पर कार्यक्षमताओं को जोड़ता है।
यह आलेख निम्नलिखित सामग्री को शामिल करता है:
- टेलविंड ब्रेकप्वाइंट और मीडिया क्वेरीज़ के साथ टेक्स्ट डेकोरेशन थिकनेस कैसे लागू करें?
- टेलविंड ब्रेकप्वाइंट के साथ टेक्स्ट डेकोरेशन थिकनेस लागू करना।
- टेलविंड मीडिया क्वेरीज़ के साथ टेक्स्ट डेकोरेशन थिकनेस लागू करना।
टेलविंड ब्रेकप्वाइंट और मीडिया क्वेरीज़ के साथ टेक्स्ट डेकोरेशन थिकनेस कैसे लागू करें?
“ पाठ सजावट मोटाई 'की सहायता से लागू किया जा सकता है' पाठ-सजावट-मोटाई 'पिक्सेल में लक्ष्य मोटाई मान के बाद संपत्ति। ये पिक्सेल हो सकते हैं ' 1px”, “2px”, “4px” या “8px ”। “ ब्रेकप्वाइंट 'का उपयोग करके उपयोगकर्ता के स्क्रीन आकार के अनुसार विभिन्न लागू कार्यात्मकताओं को अनुकूलित करने के लिए लागू किया जाता है' एमडी (मध्यम आकार की स्क्रीन)', 'एलजी (बड़े आकार की स्क्रीन) 'कक्षाएँ, आदि।' मीडिया के प्रश्नों '@' के माध्यम से ब्राउज़र और ओएस मापदंडों के एक सेट के आधार पर सशर्त कार्यान्वयन शैलियों को सक्षम करें मिडिया ' नियम।
उदाहरण 1: टेलविंड ब्रेकप्वाइंट के साथ टेक्स्ट डेकोरेशन थिकनेस लागू करना
यह उदाहरण शैली को लागू करने के लिए विभिन्न बिंदुओं पर पाठ सजावट की मोटाई निर्धारित करता है जो स्क्रीन आकार के अनुसार भिन्न होती है:
< एचटीएमएल >
< सिर >
< मेटा charset = 'यूटीएफ-8' >
< मेटा नाम = 'व्यूपोर्ट' सामग्री = 'चौड़ाई=डिवाइस-चौड़ाई, प्रारंभिक-पैमाना=1' >
< शीर्षक < / शीर्षक >
< लिखी हुई कहानी स्रोत = 'https://cdn.tailwindcss.com' < / लिखी हुई कहानी >
< / सिर >
< शरीर >
< पाठ क्षेत्र कक्षा = 'अंडरलाइन एमडी: डेकोरेशन-8 एलजी: बॉक्स-डेकोरेशन-स्लाइस टेक्स्ट-ब्लैक टेक्स्ट-2एक्सएल' पहचान = 'अस्थायी' > यह लिनक्सहिंट है < / पाठ क्षेत्र >
< / शरीर >
< / एचटीएमएल >
इस कोड स्निपेट के अनुसार, नीचे दिए गए चरण लागू करें:
- सबसे पहले, टेलविंड कार्यक्षमताओं को लागू करने के लिए सीडीएन पथ शामिल करें।
- फिर, एक '< बनाएं पाठ क्षेत्र >'तत्व और डिफ़ॉल्ट और मध्यम स्क्रीन पर बताए गए टेक्स्ट सजावट मोटाई स्तरों को शामिल करें' एमडी 'कक्षा, क्रमशः।
- “ पाठ-काला ' और ' टेक्स्ट-2xl कक्षाएं पाठ को क्रमशः रंग (काला) और फ़ॉन्ट आकार यानी 2xl आवंटित करती हैं।
उत्पादन
इस परिणाम से, यह निहित किया जा सकता है कि पाठ-सजावट की मोटाई अलग-अलग स्क्रीन आकार के अनुसार उचित रूप से अनुकूलित की गई है।
उदाहरण 2: टेलविंड मीडिया क्वेरीज़ के साथ टेक्स्ट डेकोरेशन थिकनेस लागू करना
“@ मिडिया विभिन्न मीडिया प्रकारों/उपकरणों के लिए विभिन्न शैलियों को लागू करने के लिए मीडिया क्वेरीज़ में नियम का उपयोग किया जाता है। यह विशेष प्रदर्शन एक निर्दिष्ट पैरामीटर/स्थिति के आधार पर पाठ की मोटाई को सजाने के लिए इन मीडिया प्रश्नों का उपयोग करता है:
< एचटीएमएल >
< सिर >
< मेटा charset = 'यूटीएफ-8' >
< मेटा नाम = 'व्यूपोर्ट' सामग्री = 'चौड़ाई=डिवाइस-चौड़ाई, प्रारंभिक-पैमाना=1' >
< शीर्षक < / शीर्षक >
< लिखी हुई कहानी स्रोत = 'https://cdn.tailwindcss.com' < / लिखी हुई कहानी >
< / सिर >
< शरीर >
< एच 1 पहचान = 'अस्थायी' >यह Linuxhint< है / एच 1 >
< / शरीर >
< / एचटीएमएल >
< शैली प्रकार = 'पाठ/सीएसएस' >
#अस्थायी {
पाठ-सजावट: रेखांकित करें;
मूलपाठ- संरेखित : केंद्र;
}
@ मिडिया ( अधिकतम- चौड़ाई :550px ) {
#अस्थायी {
पाठ-सजावट-मोटाई: 4px;
} }
< / शैली >
कोड के इस ब्लॉक में, नीचे दी गई पद्धतियों पर विचार करें:
- इसी तरह, सीडीएन पथ भी शामिल करें।
- फिर, एक '< जोड़ें एच 1 >'' तत्व में ''आईडी'' बताई गई है।
- कोड के सीएसएस भाग में, “< शैली >” टैग करें, शामिल शीर्षक को स्टाइल करें।
- इसके अलावा, “@” बनाएं मिडिया 'नियम जो ऐसी शर्त लागू करता है कि जब तक स्क्रीन की चौड़ाई है' 550px ', पाठ-सजावट-मोटाई' पर सेट है 4 ' पिक्सल।
- यह ऐसा है कि स्क्रीन की चौड़ाई इस सीमा से अधिक होने के बाद, टेक्स्ट बस रेखांकित हो जाएगा।
उत्पादन
यह परिणाम दर्शाता है कि '@मीडिया' नियम यानी, मीडिया क्वेरीज़ स्क्रीन की चौड़ाई के अनुसार लागू की जाती है।
निष्कर्ष
ब्रेकप्वाइंट और मीडिया क्वेरीज़ को विभिन्न वर्गों का उपयोग करके उपयोगकर्ता के स्क्रीन आकार के अनुसार लागू कार्यक्षमताओं को प्रदर्शित करने के लिए टेक्स्ट सजावट मोटाई के साथ लागू किया जा सकता है जैसे ' एमडी', 'एलजी ” या “@” के माध्यम से मिडिया क्रमशः नियम। बाद वाला दृष्टिकोण 'में निर्दिष्ट है सीएसएस कोड जो लक्ष्य तत्व को आमंत्रित करता है और निर्धारित पैरामीटर/स्थिति के आधार पर उसे सजाता है। इस गाइड में टेलविंड ब्रेकप्वाइंट और मीडिया क्वेरीज़ के साथ टेक्स्ट डेकोरेशन थिकनेस लागू करने के बारे में विस्तार से बताया गया है।