Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Very useful media queries snippets
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
/* viewport size <= 320px ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* 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 : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/*************** Specific to device if required **********************/
/* stolen from http://nmsdvid.com/snippets/ **************************/
/* iPhone 4 ----------- */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
/* iPhone5 ------------- */
@media screen and (device-aspect-ratio: 40/71) {
/* Styles */
}
or
@media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}
/* Blackberry Torch ---------- */
@media screen and (max-device-width: 480px) {
}
/* Samsung S3 ---------------- */
@media only screen and (-webkit-device-pixel-ratio: 2) {
}
/* Google Nexus 7 ------------- */
@media screen and (device-width: 600px) and (device-height: 905px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) {
}
/* iPad Mini ------------------ */
@media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1) {
}
/* iPad 3 (Landscape)-------------------- */
@media (max-device-width: 1024px) and (orientation: landscape) {
}
/* iPad 3 (portrait)-------------------- */
@media (max-device-width: 768px) and (orientation: portrait) {
}
/* Galaxy Tab 10.1 (Landscape) -------- */
@media (max-device-width: 1280px) and (orientation: landscape) {
}
/* Galaxy Tab 10.1 (Portrait) -------- */
@media (max-device-width: 800px) and (orientation: portrait) {
}
/* Retina images ---------------------- */
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
/* Retina replacement CSS here */
}
@epileftro85

This comment has been minimized.

Copy link

epileftro85 commented Jul 19, 2017

great input, thanks

@DDier

This comment has been minimized.

Copy link

DDier commented Aug 1, 2017

thank you so much

@foullo

This comment has been minimized.

Copy link

foullo commented Apr 2, 2019

Thanks

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.