Je viens de mettre en oeuvre sur mon blog de dev une solution consistant à adapter le template à la résolution de l’écran. Je l’utilise pour faire passer mon template de 2 à 3 colonnes si la résolution est supérieur à 1300px de large. Alors comment fait on me direz vous ? Tout d’abord on crée plusieurs feuilles de style. Ici j’en ai deux :
- medium.css
- large.css
/\*------------\*/
/\* medium.css \*/
/\*------------\*/
.space {margin:10px 0; clear:both;}
#wrapper {width:960px; position:absolute;left:50%;margin: 20px 0 20px -480px; display: inline;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#header {text-align:center;}
#content {width:620px; margin: 0;float:left; padding:20px 5px;}
#sidebar {width:300px; margin: 0;float:right;padding:20px 5px;}
#sidebar2 {width:300px; margin:0;float:right; padding:20px 5px;}
#footer {clear:both;}
/\*----------\*/
/\* large.css \*/
/\*----------\*/
.space {margin:10px 0; clear:both;}
#wrapper {width:1280px; position:absolute;left:50%;margin: 20px 0 20px -640px; display: inline;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
#header {text-align:center;}
#content {width:620px; margin: 0;float:left; padding:20px 5px;}
#sidebar {width:300px; margin: 0;float:left;padding:20px 5px;}
#sidebar2 {width:300px; margin: 0; float:right; padding: 20px 5px;}
#footer {clear:both;}
```**Ensuite on appel la feuille de style avec des conditions** :```