how-to-make-a-responsive-site.css

/* CSS */
/* Basic responsive */
@media screen and (max-width: 960px) {  
  /* ..custom CSS for viewports less than 960 here */
    header { /*...*/ }
    article { /*...*/ }
    footer { /*...*/ }
    /* etc.. */
}

/* Smartphones */
@media only screen
and (max-device-width : 480px) {
    header { /*...*/ }
    article { /*...*/ }
    footer { /*...*/ }
    /* etc.. */
}

/* iPads (portrait)*/
@media only screen
and (min-device-width : 768px) {
    header { /*...*/ }
    article { /*...*/ }
    footer { /*...*/ }
    /* etc.. */
}

/* Pixels */
only screen and (-webkit-min-device-pixel-ratio : 2),
only screen and (min-device-pixel-ratio : 2) { 
    /* HiDPI Retina screen */
    /* for those who know how to use 
      background-size and 2x images */
    /* etc.. */
}