Modification du fichier css en fonction de la résolution avec javascript

J'ai trouvé sur un site web, mais pour moi, il semble ne fonctionne pas.
Le problème est que css ne permet pas de modifier ou de changements très rapides tout ce que je peux voir, c'est noir flash et page blanche(http://gino.net16.net/inde.php on peut clairement voir avec firefox).Depuis je n'ai aucune compétence javascript , donc je ne sais pas quel est le problème.

Fichier principal

<html>
<head>
      <title>my title</title>
<SCRIPT LANGUAGE="JavaScript">


<!-- Begin
function redirectCSS() {

if ((screen.width == 640) && (screen.height == 480))
      {document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}

else if ((screen.width == 800) && (screen.height == 600))
      {document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}

else if ((screen.width == 1024) && (screen.height == 768))
      { document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}

else
      {document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}
}
//End -->
</script>      

</head>
<body onLoad="redirectCSS()">

<h1>Use the appropriate stylesheet to display this content</h1>

</body>
</div>
</html>

de style css fichier

@charset "utf-8";
/* CSS Document */

body {
    background-color: #2a2725;
    font-family: Arial, Helvetica, sans-serif;
    text-shadow: 0px 0px 1px #2a2725;
    color: #fff;
}
/* }}} END TableSorter */

Il semble que le travail sur jsfiddle : jsfiddle.net/vLy3p .
Google pour "CSS media queries" -- il y a des façons plus faciles de le faire!

OriginalL'auteur Decker | 2011-01-29

javascript resolution

3

Essayez d'utiliser CSS Media Queries, ils font exactement ce que vous voulez 🙂

OriginalL'auteur Florian
1

Vous d'écraser le contenu de la page. document.write après onload écrase toute la page. Au lieu de le mettre dans une fonction, vous devez exécuter le code JavaScript dans la tête, alors que le chargement de la page.
```
<script type="text/javascript">
if ((screen.width == 640) && (screen.height == 480))
      {document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}

else if ((screen.width == 800) && (screen.height == 600))
      {document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}

else if ((screen.width == 1024) && (screen.height == 768))
      { document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}

else
      {document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}
}
</script>      
```
Quelques remarques:

1) n'oubliez pas de incude un "général" de la feuille de style sans l'aide de JavaScript, pour les utilisateurs et pour les navigateurs qui ne veulent pas ou ne peuvent pas en charge JavaScript.

2) language="JavaScript" est out-of-date. Utilisation type="text/javascript" à la place.

3) Il est inutile de "commenter" le JavaScript

4) Gardez à l'esprit que la taille de l'écran n'a rien à voir avec le port de la vue (fenêtre de navigateur) taille. Pas tout le monde qui maximise la fenêtre de son navigateur.

5) Et le plus important: Il n'y a pas vraiment de raison d'utiliser du JavaScript pour ça. À moins que vous vraiment, vraiment, vraiment besoin de soutien c'est à dire, alors vous pouvez utiliser CSS3 Media Queries. Voir à cette question par un exemple: Liquide de mises en page avec les CSS

Les grands esprits se rencontrent... l'Affichage alors que j'étais à l'édition...
le point (2) - vraiment, l'attribut "type" est également inutile, et beaucoup de luminaires (par exemple Crockford) vous recommandons de toujours laisser le tout, que c'est juste une source possible d'erreur (une erreur de frappe fait un script unexecutable!) avec aucun avantage réel.

OriginalL'auteur RoToRa

Vous ne pouvez JAMAIS faire un document.écrire après le chargement de la page.
Vous devez appeler la fonction inline comme ça (et ça aide si vous avez plusieurs fichiers css trop)

<html>
<head>
      <title>my title</title>
<SCRIPT LANGUAGE="JavaScript">


<!-- Begin
function redirectCSS() {

if ((screen.width == 640) && (screen.height == 480))
      {document.write("<link href='small.css' rel='stylesheet' type='text/css'>")}

else if ((screen.width == 800) && (screen.height == 600))
      {document.write("<link href='medium.css' rel='stylesheet' type='text/css'>")}

else if ((screen.width == 1024) && (screen.height == 768))
      { document.write("<link href='large.css' rel='stylesheet' type='text/css'>")}

else
      {document.write("<link href='style.css' rel='stylesheet' type='text/css'>")}
}
redirectCSS()
//End -->
</script>      

</head>
<body >

<h1>Use the appropriate stylesheet to display this content</h1>

</body>
</div>
</html>

Je serais personnellement faire si je l'ai eu à le faire:

<html>
<head>
      <title>my title</title>
<link href='style.css' rel='stylesheet' type='text/css' />
<script type="text/javascript"><!-- Begin
var css = "";
if (screen.width < 800) css='small.css';
else if (screen.width < 1024)  css='medium.css';
else css='large.css';
document.write("<link href='"+css+"' rel='stylesheet' type='text/css' />");
//End -->
</script>      

</head>
<body >

<h1>Use the appropriate stylesheet to display this content</h1>

</body>
</div>
</html>

OriginalL'auteur mplungjan

Pas sûr qu'il fonctionne bien, dans certains cas, vous toujours d'avoir un problème avec votre mise en page.
La formule Standard de déclaration pour les css:

link rel="stylesheet" type="text/css" href="css/style.css"

link rel="stylesheet" media="screen and (max-width: 700px)" href="css/narrow.css"

link rel="stylesheet" media="screen and (min-width: 701px) and (max-width: 900px)"
        href="css/medium.css"

link rel="stylesheet" media="screen and (min-width: 901px)" href="css/wide.css"

Navigateur va changer de vue, même lorsque vous redimensionnez.

OriginalL'auteur Eugene Bosikov

Vous devez vous connecter pour publier un commentaire.