Responsive design grâce au media-queries

CSS, Langages, , ,

On peut écrire dans le fichier css de notre site des régles css media queries qui seront lues que dans certaines conditions.

voici comment:

@media screen and (max-width: 640px){
  p{ color:  blue;}
  /* etc etc */
}
@media screen and (min-width: 640px){

}
@media all and (min-width: 480px) and and (min-width: 640px){
}

Pour les téléphones portables qui « trichent » sur leurs valeurs en pixels « réels » on peut configurer la balise meta viewport du côté HTML comme suit:

<meta name= »viewport » content= »width=device-width » />

 

et dans les media queries au lieu de mettre:
« maw-width: xx » on écrira « max-device-width: xx »

vous pourrez trouver plus d’infos sur le site d’alsacréations: comprendre le viewport dans le web mobile