क्या सीएसएस कैल्क() कभी नकारात्मक मान नहीं बनने का कोई तरीका है?

Question

मेरे पास निम्न कोड है जो मेरी सामग्री को केंद्रित करने के साथ बहुत अच्छा काम करता है जब तक कि vh650px से कम न हो। मैं सोच रहा था कि इस मूल्य को 0 से नीचे कभी भी सीएसएस calc का उपयोग करने का कोई तरीका नहीं था।

.my-margin-top { 
    margin-top: calc(50vh - 325px); 
} 

Answer 1

को आधार मान कोई रास्ता नहीं करने के लिए मानों आप एक mediaquery इस्तेमाल कर सकते हैं जब max-height650px

.my-margin-top { 
    margin-top: calc(50vh - 325px); 
} 

@media all and (max-height: 650px) { 
    .my-margin-top { 
     margin-top: 0; 
    } 
} 

ज्यादा से ज्यादा है या आप भी में मौजूदा नियम लपेटकर द्वारा तर्क वापस लौटने सकता है calc() द्वारा गणना स्वाभाविक है कि वहाँ एक min-height mediaquery

@media all and (min-height: 650px) { 
    .my-margin-top { 
     margin-top: calc(50vh - 325px); 
    } 
} 

Answer 2

सामान्य सवाल का जवाब करने के लिए:

क्या सीएसएस कैल्क() कभी नकारात्मक मूल्य नहीं बनने का कोई तरीका है?

उत्तर नहीं है, क्योंकि सीएसएस कुछ न्यूनतम या अधिकतम मूल्य को मात्रा को मैन्युअल रूप से बाध्य करने (या क्लैंप) करने का कोई तरीका प्रदान नहीं करता है।

चाहे कोई संख्या या लंबाई हो सकता है किसी निश्चित सीमा तक सीमित है उस संपत्ति पर निर्भर है जिसमें calc() मान है। spec से:

अभिव्यक्ति से उत्पन्न मूल्य लक्ष्य संदर्भ में अनुमत सीमा तक क्लैंप किया जाना चाहिए।

ये दोनों 'चौड़ाई: 0 पीएक्स' के बराबर हैं क्योंकि 0px से छोटी चौड़ाई की अनुमति नहीं है।

width: calc(5px - 10px); 
width: 0px; 

उदाहरण के लिए, जबकि margin और z-index के मान ऋणात्मक border-width, padding, height, width के लिए मान्य है, नकारात्मक मान हैं और इतने पर नहीं हैं। इनकी विशिष्टताओं को संबंधित संपत्ति के विनिर्देशन में लगभग हमेशा परिभाषित किया जाता है।

जैसा कि आप अपने उदाहरण में व्यूपोर्ट इकाइयों का उपयोग करते हैं, आप उनके साथ demonstrated by fcalderan के रूप में मीडिया प्रश्नों को नियोजित कर सकते हैं।