सीएसएस मूल्य अपेक्षाकृत बदल सकते हैं?

Question

#foo{font-size:14px;} 

अब #foo 14px फ़ॉन्ट आकार

#foo{font-size:$-2px} // Hypothetical code 

अब #foo 12px फ़ॉन्ट आकार है है। (14 पीएक्स - 2 पीएक्स)

क्या यह किसी भी माध्यम से संभव है? एक चयनकर्ता के मूल्य को गतिशील रूप से बदलने के लिए।

Answer 1

1. का प्रयोग calc() विधि

मुझे समझ नहीं आता आप गतिशील रूप से बदल द्वारा क्या मतलब है। लेकिन सापेक्ष गणना करने के लिए, calc() विधि का उपयोग करें।

उदाहरण:

width: calc(100% - 80px); 

2. एस.ए.एस.एस.

तरह पूर्वप्रक्रमक का उपयोग करते हुए आप यह भी पूर्व प्रसंस्करण के लिए Sass जांच करना चाह सकते। अच्छी तरह से समर्थित सुविधाओं में से एक, चर हैं।

आप चर परिभाषित कर सकते हैं और कुछ गणना कर सकते हैं। jsfiddle

संदर्भ:: SASS

3. jQuery

ओपी आकार जब भी विंडो का आकार बदल बदलने के बारे में उल्लेख किया है का उपयोग करते हुए

$body-size: 200px; 

body { 
    width: $body-size/2 ; 
} 

यहाँ एक सरल उदाहरण मैं बनाया है। एक दृष्टिकोण jQuery

$(window).resize(function() { 
    var width = $(window).width(); 
    var height = $(window).height(); 

    $('#item').width(width); 
}); 

4. का उपयोग कर vw और vh विशेषताओं

ओपी टिप्पणी में व्यूपोर्ट के अनुसार आकार बदलने के लिए इच्छुक के बारे में उल्लेख किया है का उपयोग करना होगा।

vw और vh क्रमशः व्यूपोर्ट चौड़ाई और ऊंचाई के सापेक्ष है।

div.responsive { 
    width: 10vw; /* 10% of viewport width */ 
    height: 10vh; /* 10% of viewport height */ 
    background-color: black; /* Just to make it visible while testing */ 
} 

Answer 2

आप rem का उपयोग कर सकते हैं जो वैश्विक फ़ॉन्ट आकार का संदर्भ देगा।

:root 
 
{ 
 
    font-size : 14px; 
 
} 
 

 
#foo 
 
{ 
 
    font-size : calc(1rem - 2px); 
 
}

<div> 
 
    I am a 14px text according to the root font-size 
 
</div> 
 
<div id="foo"> 
 
    I am a 12 pixel text according to the rem font-size 
 
</div>

व्याख्या

रेम वैश्विक सीएसएस के पास भेजेगा। तो जब प्रसंस्करण (1rem - 2px), यह वास्तव में (14px - 2px) है।

Answer 3

मेरा $ 2/100।अब तक

1. सीएसएस, क्रॉस-ब्राउज़र अनुमति नहीं देता भावना का सच्चा में चर, लेकिन आप इस CSS Variables Official Doc में रुचि हो सकती।
2. सीएसएस चर का समर्थन नहीं कर रहा है, सीएसएस प्रीप्रोसेसर मौजूद सबसे महत्वपूर्ण कारणों में से एक है। जैसे। SASS, LESS।

3. आप कुछ तत्व गुणों को नियंत्रित करने के लिए font-size और फिर em का उपयोग कर सकते हैं, लेकिन यह कुछ हद तक अजीब है, और आप अलग-अलग बच्चों के तत्वों पर फ़ॉन्ट-आकार निर्दिष्ट करना समाप्त कर देंगे।

   .example { 
       font-size: 20px; 
       border-radius: .5em; // 10px (20*.5) 
       padding: 2em; // 40px (20*2) 
   }