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

Voir le sujet précédent Voir le sujet suivant Aller en bas

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

Message par Chiroki le 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 =)
avatar
Chiroki
Délices aux flageolets

Nombre de messages : 294
Age : 22
Date d'inscription : 11/10/2007

Voir le profil de l'utilisateur

Revenir en haut Aller en bas

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum