Media Query CSS Snippets

by Jennifer Perrin

CSS

/* --- 320 --- */
@media screen and (max-device-width: 320px) {

}

/* --- 480 --- */
@media screen and (max-width: 480px) {

}

/* --- 600 && Portrait --- */
@media (max-device-width: 600px) and (orientation: portrait) {

} 

/* --- 640 --- */
@media screen and (max-width: 640px) {

}

/* --- 768 && Portrait --- */
@media (max-device-width: 768px) and (orientation: portrait) { 

}

/* --- 800 --- */
@media screen and (max-width: 800px) {

}

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

}


/* --- 800 && Landscape --- */
@media (max-device-width: 800px) and (orientation: landscape) {

}

/* --- 1024 --- */
@media screen and (max-width: 1024px) {

}

/* --- 1024 && Landscape --- */
@media (max-device-width: 1024px) and (orientation: landscape) {

}

/* --- 1028 --- */
@media screen and (max-width: 1028px) {

}

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

}

JavaScript

/**
* http://jenniferperrin.com/blog/css-snippets-media-query
**/