Calcul d'une taille en "em" différente en CSS

Bonjour à tous,

Je suis en train de développer un site qui utilise le responsive design mais j'ai un problème lors de la détection de la taille d'écran.

J'ai dans mon code CSS un détection de la taille comme ça :

Code:

---

1 2 3

@media only screen and (min-width: 55em) { ... }

---

Et dans mon JS je le fais de cette manière :

Code:

---

1 2 3 4

width = $(window).width() / parseFloat($("body").css("font-size")); if (width < 55) { ... }

---

Dans les deux cas, le changement de résolution fonctionne. Mais celui en CSS intervient lorsque la fenêtre est moins large que 55em.

Pour etre clair, ça rentre dans mon test en CSS seulement lorsque la variable JS "width" vaut 53.625.

Et bien sur, pour simplifier le tout, ce problème existe sur Firefox, IE mais pas Chrome.



Avez vous des idées pour résoudre ce problème?

Je vous remercie de vos réponses.


_____

LOULOU

Bonsoir

Conseil : pour les règles "@media" utilisez exclusivement les pixels.

La méthode jQuery width donne la taille en pixels.

En fait, j'utilise le framework CSS Zurb Foundation, et c'est eux qui le mette en em d'origine

Pour ton problème, je t'invite plutôt à suivre cette solution :
http://adactio.com/journal/5429/

Cette solution répond à ton problème, et l'idée est simple, tu récupères une valeur et il te suffit simplement de tester cette valeur.
Cette valeur sera simplement différente en fonction de ton mediaquery et de la taille de ton browser.

Merci arnogues, cela à parfaitement résolu mon problème.