[javascript] Ridimensiona dinamicamente il testo in base alla larghezza del contenitore


Answers

Potresti provare questo

$(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
Question

Sto lavorando a un design reattivo e ho alcuni tag <h3> visualizzazione che vorrei ridimensionare quando la larghezza della finestra del browser è ridotta.

La configurazione iniziale, basata su una larghezza di 960px:

  1. La dimensione del carattere del corpo è impostata su 14px
  2. La dimensione del carattere del tag h3 è 40px
  3. La larghezza del div contenente è di 230 px

Quindi ecco cosa ho elaborato per javascript / 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");
});

Le mie abilità di javscript sono ovviamente piuttosto limitate, quindi speravo che potessi aiutarmi a ottenere tutto questo puramente e funzionando correttamente. Penso che la funzione $(window).resize sia l'evento sbagliato da usare, dal momento che il testo dovrebbe ridimensionarsi automaticamente al caricamento della pagina, non solo per ridimensionare le finestre.

Grazie in anticipo per l'aiuto!

Nota: non voglio che il testo si estenda ai bordi dei contenitori, motivo per cui non sto utilizzando FitText.js o BigText.js.






Links