javascript et css - affichage

[rapha]

Bonjour,

J'ai un script (voir ci-après) pour l'affichage du site quel que soit la taille de l'écran. Pour la partie CSS que dois-je indiquer ?
Quelqu'un aurait une idée ?

Raphaëlle


window.onresize=ssc;
4.
function ssc()
5.
{
6.
var a = document.documentElement.clientWidth;
7.
document.body.className = (a<= 800) ? 'scr_small' :
8.
(a<=1024) ? 'scr_average' :
9.
(a<=1280) ? 'scr_high' :
10.
'scr_wide';

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 6.0; fr; rv:1.9) Gecko/2008052906 Firefox/3.0 BarreMagique

[Asumbaa]

Salut,

Ce script rajoute une classe à ton body en fonction de la largeur de l'écran.
Tu peux ensuite cibler en CSS de la façon suivante :

Code : Tout sélectionner

body.scr_small { instructions pour écran en 800 }
body.scr_average { instructions pour écran en 1024 }
etc...

En gardant ces sélecteurs tu peux cibler les éléments plus profonds :

Code : Tout sélectionner

body.scr_average #header { instructions pour header si écran en 1024 }
etc...

En revanche, voici pourquoi il s'agit d'une mauvaise solution
- entre 8 et 10% de visiteurs sans Javascript, que faire pour eux ?
- tu vas devoir dupliquer tout un tas de règles CSS pour tes 4 largeurs d'écran (plus par défaut), ça fera beaucoup de boulot.
- la taille de l'écran n'est pas forcément la taille de la fenêtre du navigateur. Surtout pour les écrans larges.

Essaye plutôt de te renseigner sur la façon de coder un design extensible et souple directement en CSS. L'idée générale est de fixer une largeur proportionnelle au maximum de la fenêtre avec une largeur minimale et une largeur maximale.
Par exemple :

Code : Tout sélectionner

body { width: 80%;
min-width: 750px;
max-width: 1200px; }

A adapter, car pour des raisons de compatibilité IE il vaut mieux indiquer ces instructions pour un conteneur global que directement sur le body.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.9) Gecko/2008052906 Firefox/3.0

[rapha]

Merci, je vais essayer ta méthode qui me paraît plus simple et plus efficace
Raphaëlle

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 6.0; fr; rv:1.9) Gecko/2008052906 Firefox/3.0 BarreMagique

[Gil225]

je crois que le mieux pour consulter un site, je dirais normalement serait du 1024 car maintenant le 800 est devenu obsolète voir même inexistant comme le 640.

Certes des internautes surfent en 1280 seulement le problème c'est qu'après cela devient illisible et qu'est-ce que font ces personnes en générale elles augmentent la taille des caractères et cela revient pour ainsi dire à du 1024.

Moi en faisant le site j'ai indiqué qu'il était optimisé en 1024, néanmoins il s'adapte aux autres résolutions. mais bon si il faut aussi commencer à froncer les sourcils pour lire ou surfer cela devient pénible à force

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.16) Gecko/20080702 Firefox/2.0.0.16