"यदि कोई कर्मचारी अपना काम अच्छी तरह से करना चाहता है, तो उसे पहले अपने औजारों को तेज करना होगा।" - कन्फ्यूशियस, "द एनालेक्ट्स ऑफ कन्फ्यूशियस। लू लिंगगोंग"
मुखपृष्ठ > प्रोग्रामिंग > मैं विभिन्न इकाइयों के साथ यूनिट रहित सीएसएस वेरिएबल का उपयोग कैसे कर सकता हूं?

मैं विभिन्न इकाइयों के साथ यूनिट रहित सीएसएस वेरिएबल का उपयोग कैसे कर सकता हूं?

2024-11-18 को प्रकाशित
ब्राउज़ करें:288

How Can I Use Unitless CSS Variables with Different Units?

लचीलेपन के साथ यूनिटलेस सीएसएस वेरिएबल्स का उपयोग कैसे करें

यूनिटलेस सीएसएस वेरिएबल संख्यात्मक मानों को संग्रहीत करने की क्षमता प्रदान करते हैं जिन्हें स्टाइलशीट में आसानी से उपयोग किया जा सकता है . हालाँकि, ऐसे परिदृश्य उत्पन्न हो सकते हैं जहाँ आप अलग-अलग संदर्भों में एक ही वेरिएबल का उपयोग करना चाहते हैं, जिसके लिए प्रतिशत या पिक्सेल जैसी अलग-अलग इकाइयों की आवश्यकता होती है।

इस दुविधा का एक उदाहरण 10 के मान के साथ एक सीएसएस वेरिएबल सेट करना होगा लेकिन इसे एक उदाहरण में प्रतिशत के रूप में और दूसरे में गणना के लिए एक सादे संख्या के रूप में उपयोग करने की आवश्यकता है।

समाधान calc() फ़ंक्शन का उपयोग करने में निहित है। calc() फ़ंक्शन के भीतर वांछित इकाई के साथ वेरिएबल का सरल गुणन करके, हम आवश्यक लचीलापन प्राप्त कर सकते हैं।

उदाहरण के लिए, 10 के मान वाले वेरिएबल --mywidth को प्रतिशत में परिवर्तित करने के लिए , बस उपयोग करें:

div{width:calc(var(--mywidth) * 1%);}

इसके परिणामस्वरूप चौड़ाई गुण 10% पर सेट हो जाएगा, जैसा कि इरादा था .

इस दृष्टिकोण की बहुमुखी प्रतिभा विभिन्न इकाइयों तक फैली हुई है, जो आपको एक ही स्टाइलशीट के भीतर आवश्यक प्रतिशत, पिक्सेल या माप की किसी अन्य इकाई के बीच सहजता से स्विच करने की अनुमति देती है।

इसे स्पष्ट करने के लिए, विचार करें निम्नलिखित कोड स्निपेट:

:root {
  --a:50;
}

.box {
  width:calc(var(--a) * 1%);
  border:calc(var(--a) * 0.5px) solid red;
  background:linear-gradient(calc(var(--a) * 0.8deg),blue 50% ,green 0);
  padding:20px;
  
  box-sizing:border-box;
}

इस उदाहरण में, वेरिएबल --a का उपयोग चौड़ाई, सीमा, पृष्ठभूमि और पैडिंग सहित विभिन्न गुणों को परिभाषित करने के लिए किया जाता है। कैल्क() फ़ंक्शन के भीतर इकाइयों का उपयोग करके, प्रत्येक संपत्ति को --ए में संग्रहीत मूल्य के आधार पर गतिशील रूप से समायोजित किया जा सकता है।

नवीनतम ट्यूटोरियल अधिक>

चीनी भाषा का अध्ययन करें

अस्वीकरण: उपलब्ध कराए गए सभी संसाधन आंशिक रूप से इंटरनेट से हैं। यदि आपके कॉपीराइट या अन्य अधिकारों और हितों का कोई उल्लंघन होता है, तो कृपया विस्तृत कारण बताएं और कॉपीराइट या अधिकारों और हितों का प्रमाण प्रदान करें और फिर इसे ईमेल पर भेजें: [email protected] हम इसे आपके लिए यथाशीघ्र संभालेंगे।

Copyright© 2022 湘ICP备2022001581号-3