Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Responsive SCSS
/* #Media Queries
================================================== */
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {}
/** -------------
* iPhone Portrait below
* -------------*/
@media only screen and (max-width: 479px) {
}
/** -------------
* iPhone Landscape Only
* -------------*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
}
/** -------------
* iPhone Landscape Up
* -------------*/
@media only screen and (min-width: 480px) {
}
/** -------------
* iPad Portrait Only
* -------------*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
}
/** -------------
* iPad Landscape Only
* -------------*/
@media only screen and (min-width:960px) and ( max-width: 1023px) {
}
/** -------------
* Browser
* -------------*/
@media only screen and (min-width:1024px) {
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment