redimensionnement automatique du texte (taille de la police) lors du redimensionnement de la fenêtre?
J'ai essayé(en vain) pour construire une page dont les éléments seraient redimensionner comme j'ai changé la taille de la fenêtre. J'ai travailler dans le css pour les images pas de problème, mais je n'arrive pas à accomplir la même pour le texte, et je ne suis pas sûr qu'il est même possible en CSS. Et je n'arrive pas à trouver un script jquery qui accomplit cette.
Lorsque l'utilisateur redimensionne la fenêtre, j'ai essentiellement souhaitez que la page d'évoluer dynamiquement et de façon fluide, sans que l'utilisateur ait à invoquer zoom de la page. Cela fonctionne très bien sur mon img divs via le css, mais pas pour le texte, qui reste la même taille.
Des idées?
source d'informationauteur Stephen
Vous devez vous connecter pour publier un commentaire.
J'ai dû le faire moi-même. Ce que j'ai fait est que j'ai mis une base de la taille du texte pour le corps, et les pourcentages pour toutes les autres tailles. J'ai ensuite utilisé un simple script jQuery pour le changement de la base de la taille de la fenêtre de redimensionnement. Les autres dimensions alors mise à jour.
J'ai utilisé quelque chose comme ceci:
et dans le resizeMe-fonction, j'ai eu ceci:
Essayer un plugin jQuery comme FitText. Il s'adapte automatiquement le texte à la largeur de l'élément parent.
Un autre plugin jQuery avec le même objectif est BigText (démo).
Vous pouvez faire cela avec CSS3 media queriesen précisant les différents police de base-tailles en fonction de la taille du navigateur. Il y a un bon article pour cette sur Une Liste À Part
Pour IE soutien que vous pourriez être en mesure de le pirater en utilisant Expressions CSS
Cela vous oblige à utiliser une base fixe, taille de police, par exemple, sur la
body
tag, et le pourcentage ouem
tailles ailleurs.Bâtiment sur Lizzan réponse, voici une version à l'aide de la racine carrée de largeur et en hauteur pour obtenir une proportionnelle de dimensionnement:
Démo: http://jsfiddle.net/tomsoderlund/26Gad/embedded/result/
Je suis en utilisant l'astuce de http://practicaltypography.com/end-credits.html#bio M. Butterick:
roryf est sur la bonne voie!
Requêtes de média (l'une des) réponse(s).
L'astuce ici est d'utiliser % pour les tailles de police partout à partir de corps. De cette façon, la taille de la police est héréditaire, et quand vous le changez dans le corps, il est changé partout.
Essayez quelque chose comme:
Lorsque le site web de la largeur se réduit alors 600px, puis la taille de la police sera tour à 70% de ce qu'elle était partout, où % est utilisé (également h1 dans cet exemple).
Lizzans réponse est parfait! Laissez le -1 où il est! Les chatons étaient en train de mourir tout le temps quand je l'ai enlevé.
Au lieu de la taille de la police de la variable, il suffit de le régler à la norme fontsize pour votre page. La mienne a 16.
Vous pouvez faire resizible texte plus simple. Cette solution fonctionne pour moi.
http://jsfiddle.net/VooDi/dka48dx8/
Pour le corps définir une taille de police, ce qui équivaut à la fenêtre largeur intérieure;
pour jsfiddle 560 px;
js:
et pour l'ensemble d'éléments de taille de police pour cent
C'est tout. Espérons que cela aide quelqu'un.