CSS गणित कार्यों के साथ उत्तरदायी वेब डिज़ाइन में महारत हासिल करना

गणित अच्छा है, गणित बहुत अच्छा है, लेकिन क्या आप अपना समय गणना करने में बिताना चाहते हैं जब आपकी स्टाइल शीट आपके लिए यह कर सकती है?

CSS तीन आसान गणित कार्यों के साथ आता है जो आपके वेबसाइटों को डिजाइन करने के तरीके को बदल देगा। हम आपको दिखाएंगे कि आपको उनका उपयोग कैसे और क्यों करना चाहिए।

सीएसएस को गणित का परिचय

CSS मुख्य रूप से घोषणात्मक है, लेकिन संशोधनों ने भाषा के कार्यों को पेश किया है। कल्पना में अब कई कार्य हैं, और तीन सबसे सरल गणितीय बहुत उपयोगी साबित हो सकते हैं: कैल्क, अधिकतम और न्यूनतम।

आप उपयोग कर सकते हैं यह सरल कोडपेन उदाहरण गाइड के साथ पालन करने में मदद करने के लिए।

सीएसएस कैल्क () गणितीय कार्य

CSS कैल्क () फ़ंक्शन एक साधारण गणना करता है और परिणाम को संपत्ति मूल्य के रूप में उपयोग करता है। इसका मतलब यह है कि आप ऊंचाई और चौड़ाई जैसे गुणों के लिए गतिशील मान असाइन कर सकते हैं, सभी बिना सीएसएस @मीडिया प्रश्न.

यह फ़ंक्शन एक ही ऑपरेटर के साथ जोड़ (+), गुणा (*), घटाव (-), और विभाजन (/) का समर्थन करता है।

उदाहरण: सभी स्क्रीन आकारों में समान रिक्ति बनाना

वेबपेज को अलग-अलग साइज में एक जैसा दिखाना मुश्किल हो सकता है, भले ही आप डायनेमिक CSS यूनिट जैसे vw और % का इस्तेमाल करते हों। CSS कैल्क () फ़ंक्शन इसे बदलता है।

जैसा कि आप ऊपर की छवि में देख सकते हैं, शीर्षक पट्टी जो स्क्रीन पर जाती है, स्क्रीन के आकार के आधार पर अलग-अलग रिक्ति होती है। ऐसा इसलिए है क्योंकि हमने चौड़ाई को 80vw पर सेट किया है, रिक्ति को 20vw पर सेट किया है; एक चर मान।

यदि हम इसके बजाय कैल्क () का उपयोग करते हैं, तो हम रिक्ति को किसी भी स्क्रीन आकार में समान होने के लिए सेट कर सकते हैं। इसके लिए हम जिस संपत्ति का उपयोग करते हैं वह इस तरह दिखती है:

चौड़ाई: कैल्क (100vw - 400px);

यह हमारे टाइटल बार की चौड़ाई को पेज की चौड़ाई से 400px कम पर सेट करता है, जिससे डिस्प्ले के आकार पर कोई फर्क नहीं पड़ता।

सीएसएस अधिकतम () गणित समारोह

CSS अधिकतम () फ़ंक्शन किसी CSS गुण में मान जोड़ने के लिए पूल से उच्चतम मान का चयन करता है। आप जितने चाहें उतने संभावित मान जोड़ सकते हैं, प्रत्येक को अल्पविराम से अलग करके, लेकिन यह केवल उच्चतम का उपयोग करेगा।

उदाहरण: नेविगेशन बार की ऊँचाई को प्रतिबंधित करना

उत्तरदायी वेब डिज़ाइन के साथ आने वाली प्रमुख चुनौतियों में से एक अभिविन्यास है। एक साइट जो बड़े पोर्ट्रेट कंप्यूटर मॉनीटर पर काम करती है, उसे छोटे पोर्ट्रेट मोबाइल स्क्रीन पर भी अच्छा दिखना चाहिए।

यह एक संपत्ति मूल्य को डेस्कटॉप पर बहुत अच्छा और मोबाइल पर खराब बना सकता है, जैसा कि ऊपर की छवि में दिखाया गया है। हमारे नेविगेशन बार की सेट ऊंचाई 10vh है, लेकिन इससे डेस्कटॉप डिवाइस पर बार पतला दिखता है।

हम इस समस्या को हल करने के लिए CSS max() फ़ंक्शन का उपयोग कर सकते हैं:

ऊंचाई: अधिकतम (10vh, 80px);

इस तरह के एक नियम को जोड़कर, हम अपने नेविगेशन बार के लिए न्यूनतम 80px की ऊंचाई निर्धारित कर सकते हैं, जबकि 10vh के मान को बनाए रखते हुए यदि यह अधिक है।

सीएसएस मिनट () गणित समारोह

न्यूनतम () फ़ंक्शन अधिकतम () फ़ंक्शन की तरह है, लेकिन यह संपत्ति मूल्य के रूप में उपयोग करने के लिए पूल से सबसे कम मूल्य चुनता है।

उदाहरण: अधिकतम टेक्स्ट आकार सेट करना

आप एक गतिशील मूल्य का उपयोग करते हैं या नहीं, सभी प्लेटफार्मों पर टेक्स्ट का आकार प्राप्त करना पेचीदा हो सकता है। हम अपने मुख्य हेडर टेक्स्ट आकार के लिए दो या दो से अधिक संभावित संपत्ति मान सेट करने के लिए CSS min() फ़ंक्शन का उपयोग कर सकते हैं, और यह सबसे छोटे का उपयोग करेगा।

इसका उपयोग करना फ़ॉन्ट-आकार: 10vh; हमारे उदाहरण में मुख्य हेडर टेक्स्ट पर प्रॉपर्टी टेक्स्ट को डेस्कटॉप पर बहुत अच्छा बनाती है, लेकिन मोबाइल डिवाइस पर बहुत बड़ी है।

इसे बदलने के लिए, आप वैकल्पिक आकार प्रदान करने के लिए CSS min() फ़ंक्शन का उपयोग कर सकते हैं:

फ़ॉन्ट-आकार: न्यूनतम (10vh, 10vw);

यह उदाहरण काम करता है क्योंकि मोबाइल डिस्प्ले लंबे और पतले होते हैं, जबकि डेस्कटॉप मॉनिटर चौड़े और छोटे होते हैं। इसका मतलब है कि डेस्कटॉप पर देखने की चौड़ाई (vw) इकाई मोबाइल की तुलना में छोटी है।

उत्तरदायी वेब डिज़ाइन के लिए गणित का उपयोग करना

सीएसएस के साथ पहले से पैक किए गए गणित के कार्य आसानी से उत्तरदायी वेबसाइटों का निर्माण करने का एक अनूठा तरीका प्रदान करते हैं। आरंभ करने के लिए आपको बस उन्हें सही ढंग से सेट करने की आवश्यकता है।

बेशक, ऐसी अन्य विधियां और सीएसएस फ़ंक्शन हैं जिनका उपयोग आप एक ऐसी साइट बनाने के लिए कर सकते हैं जो सभी प्लेटफार्मों पर शानदार दिखे।

HTML और CSS का उपयोग करके एक उत्तरदायी नेविगेशन बार कैसे बनाएं

आगे पढ़िए

लेखक के बारे में