Taille de la police par rapport au conteneur

Je conçois un site qui s’adapte à la taille de la fenêtre et j’ai besoin de définir la taille du texte par rapport à son conteneur (un div). J’ai cherché à le faire avec css et j’ai découvert que ce n’était pas possible. Donc, j’essaie avec JavaScript, mais je ne suis pas un programmeur JavaScript. J’ai donc cherché chaque morceau du code dont j’avais besoin et l’ai compilé comme suit:

 $(document).ready(function() { while(true) { document.getElementById("text").style.fontSize = $("container").height(); } });

(le “tant que” consiste à le redimensionner en permanence, compte tenu du fait que l’utilisateur peut redimensionner la fenêtre)

Je mets le script dans la balise “head”, et cela ne fonctionne pas. Je ne sais pas si le script est erroné ou s’il ne fonctionne pas. Qu’est-ce que je fais mal? Aussi, je veux mettre un délai à la fin du script, pour éviter qu’il ne s’exécute comme un fou, mais je ne sais pas comment le faire.

Merci d’avance,

Luca

Merci aux réponses, mais rien ne fonctionne. Je suppose que le script ne fonctionne pas, qu’est-ce qui peut mal se passer ??? S’il vous plaît aider!

Vous devriez plutôt essayer quelque chose comme ceci (si je comprends bien ce que vous voulez faire):

 $(".container").each(function(){ //if container is a class $('.text', $(this)).css({'font-size': $(this).height()+"px"}); //you should only have 1 #text in your document, instead, use class });

ou quelque chose de plus comme ça

 $(window).resize(function(){ $('.text').css({'font-size': $('#container').height()+"px"}); });

http://jsfiddle.net/AyRMC/

Vous pouvez utiliser les unités de la fenêtre d’affichage:

 .vw{ font-size:3vw; color:red; } .vh{ font-size:3vh; color:green; } .vmin{ font-size:3vmin; color:blue; }

Le support technique n’est pas encore complet , mais IE10, Chrome, Firefox et Safari le prennent tous en charge.

Un inconvénient (ou potentiel) est que, du moins en chrome, le texte ne soit pas redimensionné car la fenêtre d’affichage est redimensionnée.

Compatibilité: http://caniuse.com/viewport-units

Si vous voulez dire que vous créez un site sensible, vous pouvez modifier la taille de la police en fonction de document.documentElement.clientWidth dans le gestionnaire de redimensionnement de la fenêtre.

En outre, vous pouvez utiliser des unités em au lieu de pixels, lesquels sont évolutifs et compatibles avec les appareils mobiles.

CSS3 a aussi une nouvelle unité intéressante “root em”:

CSS3 introduit quelques nouvelles unités, y compris l’unité rem, qui signifie “root em”. Si cela ne vous a pas encore endormi, voyons comment fonctionne rem.

L’unité em est relative à la taille de police du parent, ce qui cause le problème de la composition. L’unité rem est relative à l’élément root, ou html. Cela signifie que nous pouvons définir une taille de police unique sur l’élément html et définir toutes les unités rem comme un pourcentage de celle-ci.

http://snook.ca/archives/html_and_css/font-size-with-rem

Essaye ça:

Vous pouvez utiliser le gestionnaire d’événements .resize () qui ne se déclenchera que lorsque la fenêtre sera redimensionnée.

 var constant = [Some magic number] $(window).resize(function() { var fontSize = $(this).height()*$(this).width()*constant; $(html).css("font-size",fontSize) }

Utilisation d’une constante pour calculer la taille de la police en fonction de la nouvelle largeur / hauteur