A CSS snippet for media queries, using ems.

new_gist_file

/* MEDIA QUERIES
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/

/* Viewport ----------- */
@-webkit-viewport {  width: device-width; }
@-moz-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@-ms-viewport {	width: device-width; }
@viewport {	width: device-width; }

/*All ----------- */
@media all {
	.container {
		-webkit-transition: max-width 0.4s ease-in-out;
		-moz-transition: max-width 0.4s ease-in-out;
		-o-transition: max-width 0.4s ease-in-out;
		transition: max-width 0.4s ease-in-out;
	}
}

@media only screen and (min-width: 35em) {
    /* Style adjustments for viewports that meet the condition */
    /*35em = 560px*/
}

/* Retina Display ----------- */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio : 1.5),
       only screen and (min-resolution: 144dpi) {
    /* Style adjustments for viewports that meet the condition */
}

/* Print Styles ----------- */
@media print,
       (-o-min-device-pixel-ratio: 5/4),
       (-webkit-min-device-pixel-ratio: 1.25),
       (min-resolution: 120dpi) {
    /* Style adjustments for high resolution devices */
}