[Javascript]Un site qui s'adapte à toutes les résolutions

par **Chiroki** Ven 30 Nov - 1:10

Bonsoir,
C'est désormais un vrai challenge, du moins, ca l'a été
pour moi, adapter un site à toutes les résolutions, ca devient
difficile. Effectivement, il ne faut pas que le pied de page partent
dans tout les sens en 600*400, ou déforme énormément l'écran.

Il y a la solution des pourcentages, me direz vous, oui, mais ca ne marche
pas à tout les coups (Ca marcherais pour un design extensible)

[Oui, mais moi, mon design, il est fixe !]

C'est justement le but de ce topic : Vous expliquez comment l'adapter à
toutes les résolutions, et en particulier, si c'est un design fixe !

Prérequis :

- Xhtml (Des connaissances)
- CSS (En entier)

Il va faloir donc, faire autant de feuilles de style que de résolutions !

[Mais ? Ca va m'en faire des feuille de styles à moi !]

Oui, mais ne la retappez pas à chaque fois (A moins que vous soyez suicidaire..)
Voici simplement le script avec les principales résolutions d'écrans :

Code:: <script type="text/javascript"> var resolution = screen.width + "*" + screen.height; if(resolution = "800*600") { document.write("<link rel='stylesheet' media='screen' href='Lien_du_fichier.css'>"); } else if(resolution = "1024*768") { document.write("<link rel='stylesheet' media='screen' href='Lien_du_fichier.css'>"); } else if(resolution = "1024*768") { document.write("<link rel='stylesheet' media='screen' href='Lien_du_fichier.css'>"); } else if(resolution = 1024*768) { document.write("<link rel='stylesheet' media='screen' href='Lien_du_fichier.css'>"); } else if(resolution = 1080*960) { document.write("<link rel='stylesheet' media='screen' href='Lien_du_fichier.css'>"); } var resolution = screen.width + "*" + screen.height; if(resolution = "800*600") { document.write("<link rel='stylesheet' media='screen' href='lien.css'"); } else if(resolution = "600*400") { document.write("document.write("<link rel='stylesheet' media='screen' href='lien.css'");"); } else if(resolution = "1024*768") { document.write(" document.write("<link rel='stylesheet' media='screen' href='lien.css'");"); } else if(resolution = "2048*1024") { document.write("document.write("<link rel='stylesheet' media='screen' href='lien.css'");"); } else if(resolution = 1080*960) { document.write("<link rel='stylesheet' media='screen' href='lien.css'>"); } </script>

Noubliez pas de changer lien.css par le lien de votre feuille de style Wink

Ce code s'insère entre :

Code:: <head> et </head>

Codialement,
Chiroki =)