5/19/2018 - 5:23 PM
CSS Queries Reference

/**
 * Following is a comprehensive list of query possibilities.
 * It is not intended to be left intact. Use what works for
 * your build and delete the rest.
 *
 * @link https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
 */

/*--------------------------------------------------------------
# SUPPORTS QUERIES
--------------------------------------------------------------*/

/* When CSS Flexbox is not supported */
@supports not ( (display: flex) or (display: flexbox) ) {
	/* Styles */
}

/* When CSS Grid is not supported */
@supports not ( (display: grid) ) {
	/* Styles */
}

/*--------------------------------------------------------------
# WORDPRESS QUERIES
--------------------------------------------------------------*/
@media screen and (max-width: 782px) {
	/* Styles */
}

@media screen and (max-width: 600px) {
	/* Styles */
}

/*--------------------------------------------------------------
# WIDTH QUERIES
--------------------------------------------------------------*/

@media screen and (min-width: 480px) {
	/* Styles */
}

@media screen and (min-width: 640px) {
	/* Styles */
}

@media screen and (min-width: 768px) {
	/* Styles */
}

@media screen and (min-width: 1024px) {
	/* Styles */
}

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

/*--------------------------------------------------------------
# ORIENTATION QUERIES
--------------------------------------------------------------*/
@media all and (orientation: portrait) {
	/* Styles */
}

@media all and (orientation: landscape) {
	/* Styles */
}

/*--------------------------------------------------------------
# SCREEN READER QUERIES
--------------------------------------------------------------*/
@media reader, speech, aural {
	/* Styles */
}

/*--------------------------------------------------------------
# DEVICE-SPECIFIC QUERIES
--------------------------------------------------------------*/

/*
 * The primary input mechanism of the device
 * includes a pointing device of limited accuracy.
 */
@media (pointer: coarse) {
	/* Styles */
}

/*
 * The primary input mechanism of the device
 * includes an accurate pointing device.
 */
@media (pointer: fine) {
	/* Styles */
}

/*
 * The primary input mechanism of the device
 * does not include a pointing device.
 */
@media (pointer: none) {
	/* Styles */
}

/* ----------- Smartphones ----------- */

/* Portrait and Landscape */
@media only screen 
	and (min-device-width: 320px) 
	and (max-device-width: 480px) {
		/* Styles */
}

/* Portrait */
@media only screen 
	and (min-device-width: 320px) 
	and (max-device-width: 480px)
	and (orientation: portrait) {
		/* Styles */
}

/* Landscape */
@media only screen 
	and (min-device-width: 320px) 
	and (max-device-width: 480px)
	and (orientation: landscape) {
		/* Styles */
}

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
	and (min-device-width: 320px) 
	and (max-device-width: 480px)
	and (-webkit-min-device-pixel-ratio: 2) {
		/* Styles */
}

/* Portrait */
@media only screen 
	and (min-device-width: 320px) 
	and (max-device-width: 480px)
	and (-webkit-min-device-pixel-ratio: 2)
	and (orientation: portrait) {
		/* Styles */
}

/* Landscape */
@media only screen 
	and (min-device-width: 320px) 
	and (max-device-width: 480px)
	and (-webkit-min-device-pixel-ratio: 2)
	and (orientation: landscape) {
		/* Styles */
}

/* ----------- iPhone 5, 5S, 5C and 5SE ----------- */

/* Portrait and Landscape */
@media only screen 
	and (min-device-width: 320px) 
	and (max-device-width: 568px)
	and (-webkit-min-device-pixel-ratio: 2) {
		/* Styles */
}

/* Portrait */
@media only screen 
	and (min-device-width: 320px) 
	and (max-device-width: 568px)
	and (-webkit-min-device-pixel-ratio: 2)
	and (orientation: portrait) {
		/* Styles */
}

/* Landscape */
@media only screen 
	and (min-device-width: 320px) 
	and (max-device-width: 568px)
	and (-webkit-min-device-pixel-ratio: 2)
	and (orientation: landscape) {
		/* Styles */
}

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
	and (min-device-width: 375px) 
	and (max-device-width: 667px) 
	and (-webkit-min-device-pixel-ratio: 2) {
		/* Styles */
}

/* Portrait */
@media only screen 
	and (min-device-width: 375px) 
	and (max-device-width: 667px) 
	and (-webkit-min-device-pixel-ratio: 2)
	and (orientation: portrait) {
		/* Styles */
}

/* Landscape */
@media only screen 
	and (min-device-width: 375px) 
	and (max-device-width: 667px) 
	and (-webkit-min-device-pixel-ratio: 2)
	and (orientation: landscape) {
		/* Styles */
}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen 
	and (min-device-width: 414px) 
	and (max-device-width: 736px) 
	and (-webkit-min-device-pixel-ratio: 3) {
		/* Styles */
}

/* Portrait */
@media only screen 
	and (min-device-width: 414px) 
	and (max-device-width: 736px) 
	and (-webkit-min-device-pixel-ratio: 3)
	and (orientation: portrait) {
		/* Styles */
}

/* Landscape */
@media only screen 
	and (min-device-width: 414px) 
	and (max-device-width: 736px) 
	and (-webkit-min-device-pixel-ratio: 3)
	and (orientation: landscape) {
		/* Styles */
}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen 
	and (min-device-width: 375px) 
	and (max-device-width: 812px) 
	and (-webkit-min-device-pixel-ratio: 3) {
		/* Styles */
}

/* Portrait */
@media only screen 
	and (min-device-width: 375px) 
	and (max-device-width: 812px) 
	and (-webkit-min-device-pixel-ratio: 3)
	and (orientation: portrait) {
		/* Styles */
}

/* Landscape */
@media only screen 
	and (min-device-width: 375px) 
	and (max-device-width: 812px) 
	and (-webkit-min-device-pixel-ratio: 3)
	and (orientation: landscape) {
		/* Styles */
}

/* ----------- Galaxy S3 ----------- */

/* Portrait and Landscape */
@media screen 
	and (device-width: 320px) 
	and (device-height: 640px) 
	and (-webkit-device-pixel-ratio: 2) {
	/* Styles */
}

/* Portrait */
@media screen 
	and (device-width: 320px) 
	and (device-height: 640px) 
	and (-webkit-device-pixel-ratio: 2) 
	and (orientation: portrait) {
	/* Styles */
}

/* Landscape */
@media screen 
	and (device-width: 320px) 
	and (device-height: 640px) 
	and (-webkit-device-pixel-ratio: 2) 
	and (orientation: landscape) {
	/* Styles */
}

/* ----------- Galaxy S4, S5 and Note 3 ----------- */

/* Portrait and Landscape */
@media screen 
	and (device-width: 320px) 
	and (device-height: 640px) 
	and (-webkit-device-pixel-ratio: 3) {
		/* Styles */
}

/* Portrait */
@media screen 
	and (device-width: 320px) 
	and (device-height: 640px) 
	and (-webkit-device-pixel-ratio: 3) 
	and (orientation: portrait) {
		/* Styles */
}

/* Landscape */
@media screen 
	and (device-width: 320px) 
	and (device-height: 640px) 
	and (-webkit-device-pixel-ratio: 3) 
	and (orientation: landscape) {
		/* Styles */
}

/* ----------- Galaxy S6 ----------- */

/* Portrait and Landscape */
@media screen 
	and (device-width: 360px) 
	and (device-height: 640px) 
	and (-webkit-device-pixel-ratio: 4) {
		/* Styles */
}

/* Portrait */
@media screen 
	and (device-width: 360px) 
	and (device-height: 640px) 
	and (-webkit-device-pixel-ratio: 4) 
	and (orientation: portrait) {
		/* Styles */
}

/* Landscape */
@media screen 
	and (device-width: 360px) 
	and (device-height: 640px) 
	and (-webkit-device-pixel-ratio: 4) 
	and (orientation: landscape) {
		/* Styles */
}



/* ----------- Google Pixel ----------- */

/* Portrait and Landscape */
@media screen 
	and (device-width: 360px) 
	and (device-height: 640px) 
	and (-webkit-device-pixel-ratio: 3) {
		/* Styles */
}

/* Portrait */
@media screen 
	and (device-width: 360px) 
	and (device-height: 640px) 
	and (-webkit-device-pixel-ratio: 3) 
	and (orientation: portrait) {
		/* Styles */
}

/* Landscape */
@media screen 
	and (device-width: 360px) 
	and (device-height: 640px) 
	and (-webkit-device-pixel-ratio: 3) 
	and (orientation: landscape) {
		/* Styles */
}

/* ----------- Google Pixel XL ----------- */

/* Portrait and Landscape */
@media screen 
	and (device-width: 360px) 
	and (device-height: 640px) 
	and (-webkit-device-pixel-ratio: 4) {
		/* Styles */
}

/* Portrait */
@media screen 
	and (device-width: 360px) 
	and (device-height: 640px) 
	and (-webkit-device-pixel-ratio: 4) 
	and (orientation: portrait) {
		/* Styles */
}

/* Landscape */
@media screen 
	and (device-width: 360px) 
	and (device-height: 640px) 
	and (-webkit-device-pixel-ratio: 4) 
	and (orientation: landscape) {
		/* Styles */
}

/* ----------- HTC One ----------- */

/* Portrait and Landscape */
@media screen 
	and (device-width: 360px) 
	and (device-height: 640px) 
	and (-webkit-device-pixel-ratio: 3) {
		/* Styles */
}

/* Portrait */
@media screen 
	and (device-width: 360px) 
	and (device-height: 640px) 
	and (-webkit-device-pixel-ratio: 3) 
	and (orientation: portrait) {
		/* Styles */
}

/* Landscape */
@media screen 
	and (device-width: 360px) 
	and (device-height: 640px) 
	and (-webkit-device-pixel-ratio: 3) 
	and (orientation: landscape) {
		/* Styles */
}

/* ----------- Windows Phone ----------- */

/* Portrait and Landscape */
@media screen 
	and (device-width: 480px) 
	and (device-height: 800px) {
		/* Styles */
}

/* Portrait */
@media screen 
	and (device-width: 480px) 
	and (device-height: 800px)  
	and (orientation: portrait) {
		/* Styles */
}

/* Landscape */
@media screen 
	and (device-width: 480px) 
	and (device-height: 800px) 
	and (orientation: landscape) {
		/* Styles */
}


/* ----------- iPad 1, 2, Mini and Air ----------- */

/* Portrait and Landscape */
@media only screen 
	and (min-device-width: 768px) 
	and (max-device-width: 1024px) 
	and (-webkit-min-device-pixel-ratio: 1) {
		/* Styles */
}

/* Portrait */
@media only screen 
	and (min-device-width: 768px) 
	and (max-device-width: 1024px) 
	and (orientation: portrait) 
	and (-webkit-min-device-pixel-ratio: 1) {
		/* Styles */
}

/* Landscape */
@media only screen 
	and (min-device-width: 768px) 
	and (max-device-width: 1024px) 
	and (orientation: landscape) 
	and (-webkit-min-device-pixel-ratio: 1) {
		/* Styles */
}

/* ----------- iPad 3, 4 and Pro 9.7" ----------- */

/* Portrait and Landscape */
@media only screen 
	and (min-device-width: 768px) 
	and (max-device-width: 1024px) 
	and (-webkit-min-device-pixel-ratio: 2) {
		/* Styles */
}

/* Portrait */
@media only screen 
	and (min-device-width: 768px) 
	and (max-device-width: 1024px) 
	and (orientation: portrait) 
	and (-webkit-min-device-pixel-ratio: 2) {
		/* Styles */
}

/* Landscape */
@media only screen 
	and (min-device-width: 768px) 
	and (max-device-width: 1024px) 
	and (orientation: landscape) 
	and (-webkit-min-device-pixel-ratio: 2) {
		/* Styles */
}

/* ----------- iPad Pro 10.5" ----------- */

/* Portrait and Landscape */
@media only screen 
	and (min-device-width: 834px) 
	and (max-device-width: 1112px)
	and (-webkit-min-device-pixel-ratio: 2) {
		/* Styles */
}

/**
 * Portrait
 *
 * Declare the same value for min- and max-width to avoid colliding with desktops.
 *
 * @link https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106
 */
@media only screen 
	and (min-device-width: 834px) 
	and (max-device-width: 834px) 
	and (orientation: portrait) 
	and (-webkit-min-device-pixel-ratio: 2) {
		/* Styles */
}

/**
 * Landscape
 *
 * Declare the same value for min- and max-width to avoid colliding with desktops.
 *
 * @link https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106
 */
@media only screen 
	and (min-device-width: 1112px) 
	and (max-device-width: 1112px) 
	and (orientation: landscape) 
	and (-webkit-min-device-pixel-ratio: 2) {
		/* Styles */
}

/* ----------- iPad Pro 12.9" ----------- */

/* Portrait and Landscape */
@media only screen 
	and (min-device-width: 1024px) 
	and (max-device-width: 1366px)
	and (-webkit-min-device-pixel-ratio: 2) {
		/* Styles */
}

/**
 * Portrait
 *
 * Declare the same value for min- and max-width to avoid colliding with desktops.
 *
 * @link https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106
 */
@media only screen 
	and (min-device-width: 1024px) 
	and (max-device-width: 1024px) 
	and (orientation: portrait) 
	and (-webkit-min-device-pixel-ratio: 2) {
		/* Styles */
}

/**
* Landscape
*
* Declare the same value for min- and max-width to avoid colliding with desktops.
*
* @link https://medium.com/connect-the-dots/css-media-queries-for-ipad-pro-8cad10e17106
*/
@media only screen 
	and (min-device-width: 1366px) 
	and (max-device-width: 1366px) 
	and (orientation: landscape) 
	and (-webkit-min-device-pixel-ratio: 2) {
		/* Styles */
}

/* ----------- Galaxy Tab 2 ----------- */

/* Portrait and Landscape */
@media 
	(min-device-width: 800px) 
	and (max-device-width: 1280px) {
		/* Styles */
}

/* Portrait */
@media 
	(max-device-width: 800px) 
	and (orientation: portrait) {
		/* Styles */
}

/* Landscape */
@media 
	(max-device-width: 1280px) 
	and (orientation: landscape) {
		/* Styles */
}

/* ----------- Galaxy Tab S ----------- */

/* Portrait and Landscape */
@media 
	(min-device-width: 800px) 
	and (max-device-width: 1280px)
	and (-webkit-min-device-pixel-ratio: 2) {
		/* Styles */
}

/* Portrait */
@media 
	(max-device-width: 800px) 
	and (orientation: portrait)
	and (-webkit-min-device-pixel-ratio: 2) {
		/* Styles */
}

/* Landscape */
@media 
	(max-device-width: 1280px) 
	and (orientation: landscape)
	and (-webkit-min-device-pixel-ratio: 2) {
		/* Styles */
}

/* ----------- Nexus 7 ----------- */

/* Portrait and Landscape */
@media screen 
	and (device-width: 601px) 
	and (device-height: 906px) 
	and (-webkit-min-device-pixel-ratio: 1.331) 
	and (-webkit-max-device-pixel-ratio: 1.332) {
		/* Styles */
}

/* Portrait */
@media screen 
	and (device-width: 601px) 
	and (device-height: 906px) 
	and (-webkit-min-device-pixel-ratio: 1.331) 
	and (-webkit-max-device-pixel-ratio: 1.332) 
	and (orientation: portrait) {
		/* Styles */
}

/* Landscape */
@media screen 
	and (device-width: 601px) 
	and (device-height: 906px) 
	and (-webkit-min-device-pixel-ratio: 1.331) 
	and (-webkit-max-device-pixel-ratio: 1.332) 
	and (orientation: landscape) {
		/* Styles */
}

/* ----------- Nexus 9 ----------- */

/* Portrait and Landscape */
@media screen 
	and (device-width: 1536px) 
	and (device-height: 2048px) 
	and (-webkit-min-device-pixel-ratio: 1.331) 
	and (-webkit-max-device-pixel-ratio: 1.332) {
		/* Styles */
}

/* Portrait */
@media screen 
	and (device-width: 1536px) 
	and (device-height: 2048px) 
	and (-webkit-min-device-pixel-ratio: 1.331) 
	and (-webkit-max-device-pixel-ratio: 1.332) 
	and (orientation: portrait) {
		/* Styles */
}

/* Landscape */
@media screen 
	and (device-width: 1536px) 
	and (device-height: 2048px) 
	and (-webkit-min-device-pixel-ratio: 1.331) 
	and (-webkit-max-device-pixel-ratio: 1.332) 
	and (orientation: landscape) {
		/* Styles */
}


/* ----------- Kindle Fire HD 7" ----------- */

/* Portrait and Landscape */
@media only screen 
	and (min-device-width: 800px) 
	and (max-device-width: 1280px) 
	and (-webkit-min-device-pixel-ratio: 1.5) {
		/* Styles */
}

/* Portrait */
@media only screen 
	and (min-device-width: 800px) 
	and (max-device-width: 1280px) 
	and (-webkit-min-device-pixel-ratio: 1.5) 
	and (orientation: portrait) {
		/* Styles */
}

/* Landscape */
@media only screen 
	and (min-device-width: 800px) 
	and (max-device-width: 1280px) 
	and (-webkit-min-device-pixel-ratio: 1.5) 
	and (orientation: landscape) {
		/* Styles */
}

/* ----------- Kindle Fire HD 8.9" ----------- */

/* Portrait and Landscape */
@media only screen 
	and (min-device-width: 1200px) 
	and (max-device-width: 1600px) 
	and (-webkit-min-device-pixel-ratio: 1.5) {
		/* Styles */
}

/* Portrait */
@media only screen 
	and (min-device-width: 1200px) 
	and (max-device-width: 1600px) 
	and (-webkit-min-device-pixel-ratio: 1.5) 
	and (orientation: portrait) {
		/* Styles */
}

/* Landscape */
@media only screen 
	and (min-device-width: 1200px) 
	and (max-device-width: 1600px) 
	and (-webkit-min-device-pixel-ratio: 1.5) 
	and (orientation: landscape) {
		/* Styles */
}

/* ----------- Apple Watch ----------- */
@media
	(max-device-width: 42mm)
	and (min-device-width: 38mm) { 
		/* Styles */
}

/* ----------- Moto 360 Watch ----------- */
@media 
	(max-device-width: 218px)
	and (max-device-height: 281px) { 
		/* Styles */
}

/* ----------- Non-Retina Laptop ----------- */
@media screen 
	and (min-device-width: 1200px) 
	and (max-device-width: 1600px) 
	and (-webkit-min-device-pixel-ratio: 1) {
		/* Styles */
}

/* ----------- Retina Laptop ----------- */
@media screen 
	and (min-device-width: 1200px) 
	and (max-device-width: 1600px) 
	and (-webkit-min-device-pixel-ratio: 2)
	and (min-resolution: 192dpi) {
		/* Styles */
}
README.md
Rendered
Source
Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

CSS Queries Reference

CSS Queries Reference
