Une feuille de styles de base pour le Web mobile Feuille de styles mobile

Pour vous faciliter la tâche, voici ci-dessous une feuille de style dédiée au média mobile qui condense diverses bonnes pratiques et astuces.

 @media (max-width: 640px) { 

 /* passer tous les éléments de largeur fixe en largeur automatique */ 
 body, element1, element2 { 
  width: auto !important; 
  margin: auto !important; 
  padding: auto !important; 
 } 

 /* fixer une largeur maximale de 100 % aux éléments potentiellement problématiques */ 
 img, table, td, blockquote, code, pre, textarea, input, object, embed, video { 
  max-width: 100% !important; 
 } 

 /* gestion des mots longs */ 
 textarea, table, td, th, code, pre, samp { 
  word-wrap: break-word; /* césure forcée */ 
  white-space: pre-line; /* passage à la ligne spécifique pour les éléments à châsse fixe */ 
 } 

 /* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */ 
 element1, element2 { 
  float: none !important; 
  width: auto !important 
 } 

 /* masquer les éléments superflus */ 
 .hide_mobile { 
  display: none !important; 
 } 

 /* Un message personnalisé */ 
 body:before { 
  content: "Version mobile du site"; 
  display: block; 
  color: #777; 
  text-align: center; 
  font-style: italic; 
 } 
} 

La touche finale : réduire de façon harmonieuse toutes les tailles de polices en orientation paysage (propriété pour l?instant spécifique aux moteurs Safari et Android, -webkit-text-size-adjust).

 @media screen and (max-width:640px) and (orientation: landscape) { 
 body { 
  -webkit-text-size-adjust: 70%; 
 } 
}