सीएसएस, सापेक्ष फ़ॉन्ट आकार

Question

क्या कंटेनर आकार के प्रतिशत में फ़ॉन्ट आकार सेट करना संभव है? मेरे पास ऐसी वस्तुओं की एक सूची है जिसमें एक छवि, एक शीर्षलेख और विवरण है। छवि स्वचालित रूप से आकार बदलती है क्योंकि उपयोगकर्ता विंडो का आकार बदलता है। मैं हेडर फ़ॉन्ट वही करना चाहता हूं।

संपादित करें: जावास्क्रिप्ट/JQuery ठीक है।

Answer 1

बस टायलर की जवाब पर विस्तार करने के लिए, यह क्या जावास्क्रिप्ट के लिए है है, हालांकि मैं बालक सुनिश्चित करें कि आप CSS3 के व्यूपोर्ट का उपयोग कर एक ही उपलब्धि हासिल कर सकते हैं, तो आप jQuery का उपयोग कर बंद बेहतर होगा (यह हमेशा तो चिंता करने की कोई जरूरत नहीं है जो Google पर होस्ट आमतौर पर सबसे ब्राउज़र की की कैश में और है :)

आप इस तरह एक सीएसएस है:

+०१२३५१६४१०

#body #mytext { 
    font-size: 50%; 
} 

आप गतिशील रूप से इस तरह jQuery में आकार बदल सकते हैं:

$(window).resize(function(){ 
    $('#body #mytext').css('font-size',($(window).width()*0.5)+'px'); 
}); 

Answer 2

नहीं, यह केवल जावास्क्रिप्ट में ही किया जा सकता है।

Answer 3

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

http://css-tricks.com/resolution-specific-stylesheets/

Answer 4

jQuery एक विकल्प है है?

सुपर आसान अगर यह होता है: fiddle

<div id="container"> 
    <p>HELLO WORLD!</p> 
</div>​ 


<script> 
$(document).ready(function() { 
    var sizeMe = ($('#container').height()/100) * 90; /* 90% of container */ 
    $('p').css('font-size', sizeMe); 
}; 
</script> 

Answer 5

CSS3 में, वहाँ vw इकाई है, जो व्यूपोर्ट चौड़ाई के 1/100 के लिए खड़ा है। उदाहरण के लिए,

h1 { font-size: 5.5vw; } 

हेडिंग फ़ॉन्ट आकार को व्यूपोर्ट चौड़ाई के 5.5% पर सेट करता है।

हालांकि, यह अभी तक आईई 9 (मानक मोड) पर काम करता प्रतीत होता है। इसके अलावा, जब ब्राउज़र विंडो का आकार बदलता है, तो केवल आईई 9 यूनिट के मान को गतिशील रूप से परिवर्तित नहीं करता है, केवल रीलोड पर।