CSS spécifique pour petite résolution d'écran
Avec l'arrivé du CSS 3 on a maintenant l'option très pratique qui permet de mettre du code CSS pour une résolution d'écran en particulier (Responsive CSS). Et en plus fonctionant sur la majorité des navigateur sauf IE8.
Dans les fichiers CSS vous pouvez maintenant utilisé une condition max-width
/* CSS pour 780px ou moins */
@media screen and (max-width: 780px)
{
#haut { width:100%; }
#tout { width:700px; margin:0px; padding:10px; }
#s_menu { display:none;}
#page { padding-left:0px; padding-top:15px; }
}
/* CSS en action seulement si 480px de large ou moins dans le navigateur */
@media screen and (max-width: 480px)
{
#s_menu { display:none;}
#haut { width:100%; }
#tout { width:95%; margin:0px; padding:10px; }
#page { padding-left:0px; padding-top:15px; }
}
Ceci vous permet d'enlever des élément ou les réorganiser pour qu'il soit mieux positionné sur une largeur d'écran plus petite qu'un écran standard d'ordinateur.