11548 sujets

JavaScript, DOM et API Web HTML5

Police proportionnelle à écran

bonjour à tous,
lors du 'onload' et/ou d'un 'onresize' je cherche à avoir un corps de fonte proportionnel à la hauteur de la fenêtre de l'utilisateur, (soit à dire si la hauteur de body est de 800px avoir une fonte qui s'affiche en 80px)

j'ai élaboré ce charabia :
<body onresize="document.getElementByTagName('body').style.fontSize = ((window.innerHeight)/10)%;">
qui bien entendu ne fonctionne pas ! Smiley cligne

si l'un de vous sait faire … par avance merci
merci Vaxilart, Smiley jap
le plug-in FitText est sympa, mais travaille sur les polices alors que je cherchai une valeur absolue pour passer partout des valeurs <em>
j'y suis parvenu par ce code:

<script>
function init1() {
document.body.style.fontSize = window.innerHeight/5;
document.body.style.fontSize = document.body.clientHeight/5;}
function init2() {
start.scrollIntoView(top);} /*"start" est une div positionnée que j'affiche au load*/
window.onload = function() {
init1();
init2();};
</script>
…
<body onresize="init1()">

il y a probablement plus élégant mais je n'ai pas su faire Smiley decu
Bonjour,
ta première idée était bonne. Il n’y avait qu’une erreur de syntaxe
<body onresize="document.body.style.fontSize = ((window.innerHeight)/10)+'%';">


teste après la compatibilité sur ie qui risque de ne pas aimer innerHeight.
Hello,

Pour info:
- J'ai vu récemment une démo qui utilisait une série de Media Queries (avec 7 ou 8 paliers) pour changer le font-size de l'élément html. Les textes de la page étaient ensuite définis en rem (c'est possible aussi en em si on veut être compatible avec IE 7 et 8, il faudra juste faire attention à l'héritage).
- Toujours en CSS3, il y a deux unités vw et vh qui correspondent à un centième de la hauteur du viewport. Pas des masses implémenté et donc pas utilisable pour l'instant.
fvsch a écrit :
Pour info
…une démo qui utilisait une série de Media Queries
…textes de la page étaient ensuite définis en rem
…en CSS3, il y a deux unités vw et vh
…pas utilisable pour l'instant.


merci pour l'info Smiley cligne
rendez vous ici même dans quelques mois pour en reparler,
avec un magnifique tuto maison Smiley biggrin
Modifié par gazobu (19 Jan 2012 - 20:32)
Sujet clos
Aller à