यह आलेख निम्नलिखित रूपरेखा का उपयोग करके टेलविंड ब्रेकप्वाइंट और मीडिया प्रश्नों पर न्यूनतम ऊंचाई और अधिकतम ऊंचाई लागू करने की प्रक्रिया प्रदान करेगा:
- टेलविंड ब्रेकप्वाइंट और मीडिया क्वेरीज़ पर न्यूनतम-ऊंचाई संपत्ति सेट करना
- टेलविंड ब्रेकप्वाइंट और मीडिया क्वेरीज़ पर अधिकतम-ऊंचाई संपत्ति सेट करना
टेलविंड ब्रेकप्वाइंट और मीडिया क्वेरीज़ पर न्यूनतम-ऊंचाई संपत्ति कैसे सेट करें?
टेलविंड विभिन्न स्क्रीन आकारों के लिए डिज़ाइन को उत्तरदायी बनाने के लिए डिफ़ॉल्ट ब्रेकप्वाइंट और मीडिया क्वेरी प्रदान करता है। ब्रेकप्वाइंट को प्रदान किए गए गुण तब लागू होते हैं जब निर्दिष्ट स्क्रीन आकार पूरा हो जाता है। इन डिफ़ॉल्ट ब्रेकप्वाइंट के लिए न्यूनतम चौड़ाई इस प्रकार वर्णित है:
- एसएम: न्यूनतम चौड़ाई '640px'।
- एमडी: न्यूनतम चौड़ाई '768px'।
- एलजी: न्यूनतम चौड़ाई '1024px'।
- एक्सएल: न्यूनतम चौड़ाई '1280px'।
- 2xl: न्यूनतम चौड़ाई '1536px'।
न्यूनतम-ऊंचाई गुण किसी तत्व की ऊंचाई के लिए निचली सीमा निर्धारित करता है। इसका मतलब यह है कि यह किसी तत्व की न्यूनतम ऊंचाई निर्दिष्ट करता है। टेलविंड में ब्रेकप्वाइंट के साथ न्यूनतम-ऊंचाई संपत्ति का उपयोग करने के लिए, निम्नलिखित सिंटैक्स का उपयोग किया जाता है:
< डिव कक्षा = '{ब्रेकप्वाइंट उपसर्ग}:न्यूनतम-एच-{मूल्य}...' > < / डिव >
आइए बेहतर समझ प्राप्त करने के लिए एक प्रदर्शन में उपरोक्त परिभाषित वाक्यविन्यास का उपयोग करें। इस उदाहरण में, तत्व के लिए न्यूनतम ऊंचाई सीमा बढ़ जाएगी ' एमडी “ब्रेकप्वाइंट. इसके परिणामस्वरूप तत्व की कुल ऊंचाई बढ़ जाएगी।
< डिव कक्षा = 'एच-48 डब्ल्यू-48 राउंडेड-एमडी बीजी-ग्रीन-500 टेक्स्ट-सेंटर एमडी:मिन-एच-स्क्रीन' >स्क्रीन बढ़ाएँ आकार न्यूनतम ऊंचाई बढ़ाने के लिए< / डिव >
उपरोक्त कोड की व्याख्या इस प्रकार है:
- “ एच-48 क्लास div तत्व को 192px की ऊंचाई प्रदान करता है।
- “ w-48 क्लास div तत्व को 192px की ऊंचाई प्रदान करता है।
- “ गोलाकार-एमडी ” वर्ग div तत्व को गोल कोना प्रदान करता है।
- “ बीजी-{रंग}-{संख्या} क्लास div तत्व की पृष्ठभूमि को निर्दिष्ट रंग प्रदान करता है।
- “ पाठ-केंद्र क्लास टेक्स्ट तत्व को div तत्व के केंद्र में रखता है।
- “ एमडी: न्यूनतम-एच-स्क्रीन 'वर्ग न्यूनतम ऊंचाई सीमा को 100% स्क्रीन ऊंचाई के बराबर बढ़ा देगा।
आउटपुट:
आउटपुट में देखा जा सकता है कि जब '' एमडी 'स्क्रीन का आकार पूरा हो गया है, तत्व को स्क्रीन की 100% ऊंचाई मिल जाएगी। ऐसा इसलिए होता है क्योंकि 'के लिए न्यूनतम ऊंचाई सीमा' एमडी ब्रेकप्वाइंट को स्क्रीन की ऊंचाई के बराबर सेट किया गया है:
टेलविंड ब्रेकप्वाइंट और मीडिया क्वेरीज़ पर अधिकतम-ऊंचाई संपत्ति कैसे सेट करें?
अधिकतम ऊंचाई वर्ग टेलविंड में ऊंचाई संपत्ति के लिए ऊपरी सीमा निर्धारित करता है। इसका मतलब यह है कि यह किसी तत्व की अधिकतम ऊंचाई निर्दिष्ट करता है। ब्रेकप्वाइंट के साथ न्यूनतम ऊंचाई वर्ग का उपयोग करने का सिंटैक्स इस प्रकार है:
< डिव कक्षा = '{ब्रेकप्वाइंट उपसर्ग}:अधिकतम-एच-{आकार}...' > < / डिव >आइए बेहतर समझ प्राप्त करने के लिए एक प्रदर्शन में उपरोक्त परिभाषित वाक्यविन्यास का उपयोग करें। इस उदाहरण में, तत्व को 'के लिए एक विशिष्ट अधिकतम ऊंचाई सीमा प्रदान की जाएगी' एमडी “ब्रेकप्वाइंट. इससे तत्व को प्रदान की गई डिफ़ॉल्ट ऊंचाई कम हो जाएगी।
< डिव कक्षा = 'एच-96 डब्ल्यू-48 राउंडेड-एमडी बीजी-ग्रीन-500 टेक्स्ट-सेंटर एमडी:मैक्स-एच-60' >स्क्रीन बढ़ाएँ आकार न्यूनतम ऊंचाई बढ़ाने के लिए< / डिव >ध्यान दें कि उपरोक्त कोड में, किसी तत्व की डिफ़ॉल्ट ऊंचाई 'h-96' यानी 384px प्रदान की गई है। हालाँकि, 'md' ब्रेकप्वाइंट पूरा होने पर यह ऊंचाई '240px' तक कम हो जाती है। इसका कारण यह है कि ' एमडी:मैक्स-एच-60 ' कक्षा।
आउटपुट:
नीचे दिए गए आउटपुट में, यह स्पष्ट रूप से देखा जा सकता है कि एक बार स्क्रीन का आकार ' एमडी 'ब्रेकप्वाइंट, तत्व की ऊंचाई छोटी हो जाती है।
यह सब टेलविंड ब्रेकप्वाइंट के साथ न्यूनतम और अधिकतम ऊंचाई की संपत्ति निर्धारित करने के बारे में है।
निष्कर्ष
टेलविंड ब्रेकप्वाइंट और मीडिया प्रश्नों के साथ अधिकतम ऊंचाई संपत्ति सेट करने के लिए, ' {ब्रेकप्वाइंट उपसर्ग}:अधिकतम-एच-{आकार} 'वर्ग का प्रयोग किया जाता है। इसी तरह, टेलविंड ब्रेकप्वाइंट के साथ न्यूनतम ऊंचाई संपत्ति निर्धारित करने के लिए, ' {ब्रेकप्वाइंट उपसर्ग}:न्यूनतम-एच-{आकार} 'वर्ग का प्रयोग किया जाता है। इस आलेख ने टेलविंड में ब्रेकप्वाइंट और मीडिया प्रश्नों के लिए न्यूनतम और अधिकतम-ऊंचाई गुणों को लागू करने की प्रक्रिया प्रदान की है।