28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je ne sais pas si vous connaissez le site www.pxtoem.com
Je m'en sers car cela m'évite de faire un calcule mathématique à chaque titre qui sont à différentes grandeurs.

Dans le body je commence mon font-size:68.8% qui équivaut à 11px. Dans le reste du site j'utilise des valeurs en EM expemle 1.36em pour avoir un titre h1 à 15px.

J'utilise un javascript qui me permet de grossir ou réduire le font-size en alternant avec une autre CSS.

Voici mon problème:
Exemple mon autre feuille de style ALTERNATE doit avoir un body par défaut à 14px qui se traduit en 1.27em. Mais je n'utilise pas cette valeur en em puisque j'ai toutes sortes de grandeurs différentes avec les h1, h2 et ainsi de suite. Donc je voudrais que le tout se fasse en %.

Je met donc ma feuille de style alternative avec un body a 127% qui serait en principe à 14px. Selon le site de pxtoem.com
Mais le résultat semble être plutôt à 21px.

Je ne comprend pas comment il calcule lorsque je met mon body à 127%.

Je vous fournis une image. upload/16393-px-to-em.gif
britanicus75 a écrit :
Dans le body je commence mon font-size:68.8% qui équivaut à 11px.

Attention aux confusions. Ni 68.8% ni aucune valeur en pourcentage ou EM n'équivaut à 11px. Tout dépend de la taille du texte par défaut configurée dans le navigateur. Il est vrai que la quasi-totalité des navigateurs (à l'exception peut-être de navigateurs pour mobiles...) utilise une valeur par défaut de 16px. Mais rien ne garantit que:
- cette valeur restera à l'avenir à 16px (les résolutions des écrans augmentent, on a de plus en plus de pixels au cm carré... pour garder du texte lisible, il faudra à un moment où un autre augmenter la taille du texte par défaut...);
- l'utilisateur n'a pas configuré son navigateur pour utiliser une taille de texte par défaut différente.

Mais mettons que le cas taille du texte par défaut = 16px est largement majoritaire. Dans ce cas, alors appliquer sur BODY un font-size de 68.75% ou de 0.6875em permet d'obtenir 11px tout juste. En passant, la valeur exacte est 0.6875 et pas 0.688, car 11/16 = 0.6875.

Pour obtenir une taille de texte sur BODY de 14px, il faut faire 14/16 = 0.875. Donc utiliser une taille de texte de 0.875em ou 87.5%.

Je ne sais pas d'où tu sors la valeur 1.63em, mais 16*1.36=21.76. CQFD.
Modifié par Florent V. (07 Feb 2009 - 00:44)
Administrateur
Bonjour,

la feuille de style ALTERNATE vient-elle à la place de la feuille de style principale ou bien en plus?
Je suppose que tu crois que c'est le deuxième cas mais qu'en fait c'est le premier ...
Il y a quelque chose qui ne fonctionne pas bien?

Par défaut dans ma page html j'ai la feuille style.css et fontmedium.css ensuite lorsqu'on clique pour agrandir ou réduire la css change en fonction du clique.

Pourtant le résultant dans IE semble être bcp trop petit.

Voici le code principale du css :
style.css

html {font-size: 100%;}
#container {color:#454545; font-size:68.8%; letter-spacing:0.2px; margin:0 auto; position:relative; text-align:left; width:996px;} /* 11px */


Maintenant voici les css alternative :
fontsmall.css

#centre *{
	font-size:56.3%; /* 9px */
}


fontmedium.css

#centre *{
	font-size:68.8%; /* 11px */
}


fontlarge.css

#centre *{
	font-size:87.5%; /* 14px */
}


fontxlarge.css

#centre *{
	font-size:112.5%; /* 18px */
}