@ media (max-width: 640 px) {

 / * Pass all elements of fixed width automatic width * / 
 body , element1 , element2  {
    width : auto ; 
   margin : 0 ;  
   padding : 0 ;  
 }

 / * Set a maximum width of 100% to potentially problematic elements * / 
 img , table , td , blockquote , code , pre , textarea , input , iframe , object , embed , video  {
    max-width : 100 % ;  
 }
 / * keep the ratio of the images and prevent overflow boxes due to the border or padding
   
   
   
   
 

 / * Management of long words * / 
 textarea , table , td , th , code , pre , samp  {
    word-wrap : break-word ;  / * newline forced * / 
   -webkit-hyphens : auto ;  / * clean break * / 
   -moz-hyphens : auto ; 
   hyphens : auto ; 
 }
  code , pre , samp  {
    white-space : pre-wrap ;  / * newline specific elements to shrine fixed * / 
 }

 / * Skip to a single column (to be applied to multi-column elements) * / 
 element1 , element2  {
    float : none ; 
   width : auto ; 
 }

 / * Hide unwanted items * / 
 . hide_mobile  {
    display : none ! important ; 
 }

 / * A custom message * / 
 body : before  {
    happy : "Mobile version of the site" ,  
   display : block ; 
   color : # 777 ;  
   text-align : center ; 
   font-style : italic ; 
 }
}
The final touch: a harmonious reduce all font sizes in landscape orientation (because of buggy devices iPhone and iPad ).

@ media (max-device-width: 768 px) and (orientation: landscape) {
   html  {
    -webkit-text-size-adjust : 100 % ;  
  }
}