javascript - गतिशील रूप से कंटेनर चौड़ाई के आधार पर पाठ का आकार बदलें




jquery font-size (2)

आप यह कोशिश कर सकते हैं

$(window).resize(function(){
    var containerSize = $('.container').width();
    var textPercentage = 0.17391304347826086956521739130435; /* 40/230 */
    var textRatio = containerSize * textPercentage;
    var textEms = textRatio / 14;

    //fontSize should be enclosed in quotes
    $('.container h3').css('fontSize', textEms+"em");
})
.resize();//Triggers the resize on page load to set the font size

मैं एक उत्तरदायी डिज़ाइन पर काम कर रहा हूं और मेरे पास कुछ डिस्प्ले <h3> टैग हैं जो कि ब्राउज़र विंडो की चौड़ाई कम होने पर मैं इसे नीचे करना चाहूंगा

960px की चौड़ाई के आधार पर प्रारंभिक सेटअप:

  1. शरीर फ़ॉन्ट-आकार 14px पर सेट है
  2. एच 3 टैग का फ़ॉन्ट-आकार 40px है
  3. युक्त डिवा की चौड़ाई 230px है

तो यहां मैंने जावास्क्रिप्ट / jQuery के लिए काम किया है:

$(window).resize(function(){
    var containerSize = $('.container').width();
    var textPercentage = 0.17391304347826086956521739130435; /* 40/230 */
    var textRatio = containerSize * textPercentage;
    var textEms = textRatio / 14;

    $('.container h3').css(fontSize,textEms+"em");
});

मेरे javscript कौशल स्पष्ट रूप से काफी सीमित हैं, इसलिए मैं उम्मीद कर रहा था कि आप मुझे यह सब शुद्ध और सही काम करने में मदद कर सकते हैं। मुझे लगता है कि $(window).resize फ़ंक्शन गलत घटना है, क्योंकि पाठ को पृष्ठ लोड पर स्वचालित रूप से बदलना चाहिए, न कि $(window).resize पर।

मदद के लिए अग्रिम धन्यवाद!

नोट: मैं पाठ को कंटेनरों के किनारों तक नहीं खींचना चाहता, इसलिए मैं FitText.js या BigText.js का उपयोग नहीं कर रहा हूं।


window.resize सही घटना है लेकिन यह पेज-लोड पर आग नहीं window.resize है। आप हालांकि अपने कोड में पेज-लोड पर आग लगाने के लिए बस .trigger('resize') जोड़ सकते हैं:

$(window).bind('resize', function(){
    var containerSize  = $('.container').width(),
        textPercentage = 0.17391304347826086956521739130435, /* 40/230 */
        textRatio      = containerSize * textPercentage,
        textEms        = textRatio / 14;

    $('.container h3').css(fontSize, textEms+"em");
}).trigger('resize');

आप इस कोड को document.ready के बाद चलाना चाहते हैं। यह सुनिश्चित करने के लिए कि कंटेनर की चौड़ाई सही है आप इस कोड को अपने HTML दस्तावेज़ के निचले भाग में भी रख सकते हैं (जो आपको दस्तावेज़ के साथ या बिना किया जाना चाहिए। ईवेंट ईवेंट हैंडलर) जो यह सुनिश्चित करेगा कि जब आप इस कोड को चलाते हैं तो तत्व उपलब्ध होते हैं:

//wait for `document.ready` to fire
$(function () {

    //cache the .container and H3 elements
    var $container = $('.container'),
        $h3        = $container.find('h3');

    //bind event handler to `window.resize`
    $(window).bind('resize', function(){

        //get the width of the container
        var containerSize  = $container.width(),
            textPercentage = 0.17391304347826086956521739130435, /* 40/230 */
            textRatio      = containerSize * textPercentage,
            textEms        = textRatio / 14;

        $h3.css('fontSize', textEms+"em");
    }).trigger('resize');
});

ध्यान दें कि मैंने H3 तत्व को कैश किया है, इसलिए इसे / फिर प्रत्येक पुन: आकार की घटना का चयन करने की आवश्यकता नहीं है, क्योंकि जब आप वास्तव में अपने ब्राउज़र को फिर से आकार देते हैं तो इन घटनाओं में से बहुत से आग लग जाती हैं





responsive-design