Medias queries : cibler les principales résolutions

Bonjour,

Je réalise une page d'accueil qui a une photo en fond. Celle-ci doit prendre toute la largeur de l'écran. Je dois donc m'adapter aux différentes résolutions grâce aux medias queries.

Je me demande quelles sont les principales résolutions :

@media screen and (max-width: 640px)
@media screen and (max-width: 800px)
@media screen and (max-width: 1024px)
@media screen and (max-width: 1600px)

Comment procéder ?

Par avance, un grand merci !

Raphaël L.

Il n'y a pas vraiment de résolutions principales. Il y en avait peut-être à l'époque où le Web se partageait entre le 800x600, le 1024x768 et quelques rares grands écrans en 1280xquelquechose ou plus. Mais ça c'est fini. La diversité est presque infinie, grâce aux:
- écrans desktop grands ou très grands... avec fenêtre de navigateur pas forcément maximisée et donc largeur de viewport qui dépendent des préférences de l'utilisateur;
- netbooks et ultraportables;
- tablettes (divers formats avec prédominance pour l'instant de l'iPad);
- smartphones (divers formats).

Si tu veux couvrir tout le fond du viewport avec une photo, déjà tu devrais regarder du côté de background-size en CSS3 (attention: pas compatible IE 7-8). Ensuite, tu dois pouvoir te contenter de charger une image dans une résolution approchant celle du viewport. Avec trois images ça devrait suffire. Par exemple:
- pour mobile, une image de 600px de large;
- pour desktop de petite taille ou tablette, du 1000px de large;
- pour desktop de grande taille, du 1400px de large.
Et entre ça avec des paliers du type 750px et 1100px.
Éventuellement appeler l'image la plus grande par défaut, hors media queries, pour IE 7-8 (usage desktop), et les tailles plus petites via media queries. Il faudra vérifier que les navigateurs ne téléchargent pas plusieurs images dans ce cas de figure (il me semble que non).

Merci Florent !

Auriez-vous des exemples de sites avec des images en plein écran ?