web-dev-qa-db-fra.com

redimensionner automatiquement le texte (taille de la police) lors du redimensionnement de la fenêtre?

J'ai essayé (en vain) de construire une page dont les éléments seraient redimensionnés lorsque je changeais la taille de la fenêtre. Je l'ai en css pour les images sans problème, mais je n'arrive pas à faire la même chose pour le texte, et je ne suis pas sûr que ce soit même possible en CSS. Et je n'arrive pas à trouver un script jQuery qui accomplisse cela.

Lorsqu'un utilisateur redimensionne la fenêtre, je souhaite essentiellement que la page soit redimensionnée de manière dynamique et fluide, sans que l'utilisateur ait à invoquer le zoom de la page. Cela fonctionne bien sur mes divs img via css, mais pas pour le texte, qui reste la même taille.

Des idées?

jquerycsstextresizefluid-layout
14
Stephen

J'ai dû le faire moi-même. Ce que j'ai fait est de définir une taille de texte de base pour le corps et des pourcentages pour toutes les autres tailles. J'ai ensuite utilisé un simple script jQuery pour changer la taille de la base lors du redimensionnement de la fenêtre. Les autres tailles sont également mises à jour. 

J'ai utilisé quelque chose comme ça:

$(function() {
    $(window).bind('resize', function()
    {
        resizeMe();
        }).trigger('resize');
    });

et dans la fonction resizeMe, j'avais ceci:

//Standard height, for which the body font size is correct
var preferredHeight = 768;
//Base font size for the page
var fontsize = 18;

var displayHeight = $(window).height();
var percentage = displayHeight / preferredHeight;
var newFontSize = Math.floor(fontsize * percentage) - 1;
$("body").css("font-size", newFontSize);
34
Lizzan

Essayez un plugin jQuery comme FitText . Il adapte automatiquement le texte à la largeur de l'élément parent.

Un autre plugin jQuery ayant le même objectif est BigText ( demo ).

12
Ryan McGeary

Vous pouvez le faire avec Requêtes de média CSS3 , en spécifiant différentes tailles de police de base en fonction de la taille du navigateur. Il y a un bon article à ce sujet sur A List Apart

Pour le support de IE, vous pourrez peut-être le pirater en utilisant expressions CSS

Cela nécessite que vous utilisiez une taille de police de base fixe, par exemple sur la balise body, et des tailles en pourcentage ou em ailleurs.

7
roryf

S'appuyant sur la réponse de Lizzan, voici une version utilisant la racine carrée de largeur et de hauteur pour obtenir un dimensionnement proportionnel:

// When document has finished loading
$(document).ready(function() {

    var resizeText = function () {
        // Standard height, for which the body font size is correct
        var preferredFontSize = 180; // %
        var preferredSize = 1024 * 768;

        var currentSize = $(window).width() * $(window).height();
        var scalePercentage = Math.sqrt(currentSize) / Math.sqrt(preferredSize);
        var newFontSize = preferredFontSize * scalePercentage;
        $("body").css("font-size", newFontSize + '%');
    };

    $(window).bind('resize', function() {
        resizeText();
    }).trigger('resize');

});

Démo: http://jsfiddle.net/tomsoderlund/26Gad/embedded/result/

4
Tom Söderlund

roryf est sur la bonne voie!

Media Queries est l'une des réponses.

Le truc ici est d’utiliser% pour les tailles de police partout à partir du corps. De cette façon, la taille de la police est héritée et, lorsque vous la modifiez dans son corps, elle est modifiée partout.

Essayez quelque chose comme: 

body { font-size: 100% }
h1 {font-size: 200% }

@media all and (max-width:600px) {
    body {font-size: 70%}
}

Lorsque la largeur du site Web est inférieure à 600 pixels, la taille de la police passe à 70% de ce qu'elle était partout, où% est utilisé (également h1 dans cet exemple).

3
Martin Sookael

J'utilise l'astuce de http://practicaltypography.com/end-credits.html#bio M. Butterick:

    <style type="text/css">
<!--adattamento font-size a browser width-->
        @media all {html {font-size: 24px;}}@media all and (max-width:2200px){html {font-size: 27px;}}@media all and (max-width:1800px){html {font-size: 26px;}}@media all and (max-width:1400px){html {font-size: 25px;}}@media all and (max-width:1000px){html {font-size: 24px;}}@media all and (max-width:960px){html {font-size: 23px;}}@media all and (max-width:920px){html {font-size: 22px;}}@media all and (max-width:880px){html {font-size: 21px;}}@media all and (max-width:840px){html {font-size: 20px;}}@media all and (max-width:800px){html {font-size: 19px;}}@media all and (max-width:760px){html {font-size: 18px;}}@media all and (max-width:720px){html {font-size: 17px;}}@media all and (max-width:680px){html {font-size: 16px;}}@media all and (max-width:640px){html {font-size: 15px;}}@media all and (max-width:600px){html {font-size: 14px;}}@media all and (max-width:560px){html {font-size: 13px;}}@media all and (max-width:520px){html {font-size: 12px;}}
<!--body-format-->
            body {
        max-width:1000px;
        min-width:520px;
        line-height:1.33em;
        margin:1em;
        background-color:#f7f7f7;
        font-family:Source Sans Pro;
        color:#361800;
        }
    </style>
3
Peter Forster

Vous pouvez simplifier le texte redimensionnable. Cette solution fonctionne pour moi . http://jsfiddle.net/VooDi/dka48dx8/

Pour body set font-size, cet équivalent à la largeur intérieure de votre fenêtre actuelle;

pour jsfiddle 560 px;

body {
    font-size: 560px; 
}

js:

onresize=onload=function() {
    document.body.style.fontSize=window.innerWidth+"px"
}

et pour la taille de police du jeu d'éléments requis en pourcentage

<h1 style="font-size:5%">Resize this text!!!!</h1>

C'est tout. J'espère que ça aide quelqu'un.

0
G.F.

La réponse des Lizzans est parfaite! Laissez le -1 où il est! Les chatons mouraient partout quand je l'ai enlevé.

Au lieu de la variable fontsize, définissez-la simplement à la taille de police standard de votre page. La mienne avait 16 ans.

0
Ultroman the Tacoman