
[CSS] Adapter votre template à la résolution de l’écran
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 :