Table des matières
Niveau
..........
En rapport...

Quoi ?

Difficulté :


Le but de cette page est de vous expliquer comment obtenir des tailles de polices proportionnelles à la taille de votre page.
Ainsi si le navigateur est tres réduit la police sera miniature et vice versa.

Voir l'exemple : police_proportionnelle.htm

Principe

L'idée est d'utilser la propriété "fontsize" du CSS pour que toutes les polices soit en fonction de la taille de police du parent.
On va donc choisir comme parent de toute balise html la balise <body> et lui appliquer une taille de police exactement égale à la taille du naviguateur.
Pour ce faire nous avons besoin d'un peu de javascript.

Le code

javascript
//Cette fonction Récupere et renvoie la taille de la fenêtre du navigateur
//Trouvé sur www.pompage.net
function getWindowHeight() {
    var windowHeight=0;
    if (typeof(window.innerHeight)=='number') {
        windowHeight=window.innerHeight;
    }
    else {
     if (document.documentElement&&
       document.documentElement.clientHeight) {
         windowHeight = document.documentElement.clientHeight;
    }
    else {
     if (document.body&&document.body.clientHeight) {
         windowHeight=document.body.clientHeight;
      }
     }
    }
    return windowHeight;
}
//Ces deux petits blocs attachent la fonction SetPolice aux evenements onload et onresize
//De cette façon, apres le chargement et à chaque resize, setPolice sera appelée.
window.onload = function() {
setPolice();
}
window.onresize = function() {
setPolice();
}
//Ici, on lit la taille de la fenêtre du navigateur
//et on applique cette taille au fontsize de l'élément qui a comme id "body"
function setPolice() {
    if (document.getElementById) {
        var windowHeight=getWindowHeight();
        if (windowHeight>0) {
            document.getElementById('body').style.fontSize=windowHeight+'px';
        }
    }
}

Comme vous vous en doutez, pour que ça marche il faut mettre un id à la balise body :

html4strict
<body id="body">
...
</body>

et apres ?

Une fois que la fonction javascript est appelé, si la fenêtre de votre naviguateur fait 600px, la taille de la police de body passe à 600px. les autres balises seront mise en page avec l'unité em.
On pourra donc mettre

html4strict
<body id="body">
<div style="fontSize:0.1em"> ... </div>
</body>

Ainsi le div a 0.1em aura une police de 600*0.1 = 60px
et si le naviguateur changeait de taille pour 150px le div ferait : 150*0.1=15px