Media Queries for Popular Devices

Remember, these are just four out of many. Good responsive designers and developers will modify these breakpoints as needed!

Smartphone Tablet Laptop Desktop
Portrait 

/* Smartphone
(portrait) --- */
@media only screen
and (max-device-width: 20em) {
}

	

/* Tablet
(portrait) --- */
@media only screen
and (min-device-width: 48em)
and (max-device-width: 64em)
and (orientation: portrait) {
}
n/a n/a
Landscape 

/* Smartphone
(landscape) --- */
@media only screen
and (min-width: 20.1em)
and (orientation: landscape) {
}

	

/* Tablet
(landscape) --- */
@media only screen
and (min-device-width: 48em)
and (max-device-width: 64em)
and (orientation: landscape) {
}

	

/* Laptop & Desktop --- */
@media only screen
and (min-width: 76.5em) {
}		

	

/* Desktop & Beyond --- */
@media only screen
and (min-width: 114em) {
}
Both 

/* Smartphone
(portrait & landscape) --- */
@media only screen
and (min-device-width: 20em)
and (max-device-width: 30em) {
}

	

/* Tablet
(portrait & landscape) --- */
@media only screen
and (min-device-width: 48em)
and (max-device-width: 64em) {
}
n/a n/a