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 :