PHPascal.com

PHPAscal rouge2 (Version bleu)


Programmation web CSS HTML PHP Jquery Javascript Wordpresse RSS SQL SSH, serveur linux Outils
  PHPascal a 144 articles


Recherche


cheap nike nfl jerseysWholesale cheap nfl jerseyscheap jerseys online from chinacheap nfl jerseys free shippingwholesale nba jerseysWholesale cheap nhl jerseyscheap nhl jerseys onlinecheap nba basketball jerseys

Valid HTML 5

Programmation web / CSS / CSS dynamique pour mobile ou tablette

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.
 

Article écrit le 10 janvier 2013
Article modifié le 15 février 2013

Autres articles sous la même catégorie


Pascal Dubreuil | © PHPascal.com 2017
Temps d'exécution : 0.0136 sec
Imprimer le 16 August 2017 - 23:41:16
par Pascal Dubreuil organisateur du Marathon de Laval