css: Media Queries

media_queries.css

/************************** iPads (portrait and landscape) */
@media 
	only screen 
	and (min-device-width : 768px) 
	and (max-device-width : 1024px) {
	/* Styles */
}

/************************** iPads (landscape) */
@media 
	only screen 
	and (min-device-width : 768px) 
	and (max-device-width : 1024px) 
	and (orientation : landscape) {
	/* Styles */
}

/************************** iPads (portrait) */
@media 
	only screen 
	and (min-device-width : 768px) 
	and (max-device-width : 1024px) 
	and (orientation : portrait) {
	/* Styles */
}

/************************** Desktops and laptops */
@media 
	only screen 
	and (min-width : 992px) {
	/* Styles */
}

/************************** Humongous screens */
@media 
	only screen 
	and (min-width : 1200px) {
/* Styles */
}

/************************** Pixel density */
@media 
	only screen and (-webkit-min-device-pixel-ratio : 1.5), 
	only screen and (min-device-pixel-ratio : 1.5) {
	/* Styles */
}



/* INTERNET EXPLORER HACKS
** http://blog.keithclark.co.uk/moving-ie-specific-css-into-media-blocks/
*/

/************************** IE 6 and 7 */
@media screen\9 {
	/* Styles */
}

/************************** IE 6, 7 and 8 */
@media \0screen\,screen\9 {
	/* Styles */
}

/************************** IE 8 */
@media \0screen {
	/* Styles */
}

/************************** IE 8, 9 and 10 */
@media screen\0 {
	/* Styles */
}

/************************** IE 9 and 10 */
@media screen and (min-width:0\0) {
	/* Styles */
}

media_queries_csstricks.css

/************************** iPads (portrait and landscape) */
@media 
	only screen 
	and (min-device-width : 768px) 
	and (max-device-width : 1024px) {
	/* Styles */
}

/************************** iPads (landscape) */
@media 
	only screen 
	and (min-device-width : 768px) 
	and (max-device-width : 1024px) 
	and (orientation : landscape) {
	/* Styles */
}

/************************** iPads (portrait) */
@media 
	only screen 
	and (min-device-width : 768px) 
	and (max-device-width : 1024px) 
	and (orientation : portrait) {
	/* Styles */
}

/************************** Desktops and laptops */
@media 
	only screen 
	and (min-width : 992px) {
	/* Styles */
}

/************************** Humongous screens */
@media 
	only screen 
	and (min-width : 1200px) {
/* Styles */
}

/************************** Pixel density */
@media 
	only screen and (-webkit-min-device-pixel-ratio : 1.5), 
	only screen and (min-device-pixel-ratio : 1.5) {
	/* Styles */
}



/* INTERNET EXPLORER HACKS
** http://blog.keithclark.co.uk/moving-ie-specific-css-into-media-blocks/
*/

/************************** IE 6 and 7 */
@media screen\9 {
	/* Styles */
}

/************************** IE 6, 7 and 8 */
@media \0screen\,screen\9 {
	/* Styles */
}

/************************** IE 8 */
@media \0screen {
	/* Styles */
}

/************************** IE 8, 9 and 10 */
@media screen\0 {
	/* Styles */
}

/************************** IE 9 and 10 */
@media screen and (min-width:0\0) {
	/* Styles */
}



/* MOZILLA HACKS
** https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Mozilla_Extensions
*/
@-moz-document url-prefix() {
	/* Styles */
}