2017-09-20 1 views
0

J'ai trouvé du code qui mettra à l'échelle du texte lorsque la fenêtre du navigateur est redimensionnée et qu'elle semble fonctionner correctement.Javascript Mise à l'échelle du code de la police du corps vers div/element

Voici le code:

document.body.setScaledFont = function (f) { 
     var s = this.offsetWidth, 
      fs = s * f; 
     this.style.fontSize = fs + '%'; 
     return this 
    }; 

    document.body.setScaledFont(0.35); 
    window.onresize = function() { 
     document.body.setScaledFont(0.35); 
    } 

Ma question est:

Comment puis-je modifier ce code afin que le texte balance quand un div spécifié est mise à l'échelle à la place?

Code mis à jour à partir de la réponse suggérée par @Deano. Ce code n'est redimensionné que lorsque le navigateur est redimensionné.

<!doctype html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8"> 

    <title></title> 

    <style type="text/css"> 



    #window { 
     border:1px dashed #ccc; 
     overflow: hidden; 
     resize: both; 
     text-align: center; 
    } 

    </style> 

</head> 

<body> 

<div id="window">Scale the window</div> 




    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script> 

    $(document).ready(function() { 

    $('#window').mouseup(function() { 

     document.getElementById('window').setScaledFont = function (f) { 
      var s = this.offsetWidth, 
      fs = s * f; 
      this.style.fontSize = fs + '%'; 
      return this 
     }; 

      document.getElementById('window').setScaledFont(0.35); 
      window.onresize = function() { 
      document.getElementById('window').setScaledFont(0.35); 
     } 

     }); 

    }); 



    </script> 

</body> 
</html> 
+0

Qu'est-ce que avez-vous essayé jusqu'ici? S'il vous plaît montrer votre code. – Soviut

Répondre

1

document.body cibles du corps entier, si vous souhaitez cibler un élément spécifique, utilisez Id ou class.

document.getElementById('window').setScaledFont = function (f) { 
 
    var s = this.offsetWidth, 
 
     fs = s * f; 
 
    this.style.fontSize = fs + '%'; 
 
    return this 
 
    }; 
 

 
    document.getElementById('window').setScaledFont(0.35); 
 
    window.onresize = function() { 
 
    document.getElementById('window').setScaledFont(0.35); 
 
    }
div { 
 
    font-size:2em; 
 
}
<div id="window">Scale the window</div>

JSfiddle

Mise à jour Depuis l'exigence de la question a changé: -/

Vous aurez besoin d'utiliser un libary comme mimetic.js DEMO

+0

Je ne pouvais pas le mettre à l'échelle lorsque le div est redimensionné. S'il vous plaît voir le code complet sur la partie inférieure éditée de la question ci-dessus – max2020

+0

J'ai ajouté un lien JSfiddle :) – Deano

+0

Oui Ive vu mais il ne sera pas l'échelle sur div redimensionner ... S'il vous plaît voir mon code complet de question éditée afin que vous sachiez ce que je veux dire – max2020