Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Responsive Break Point Media Query Boilerplate
// Mobile First
@media screen and (min-width: 321px) { // iPhone landscape
}
@media screen and (min-width: 481px) { // iPad portrait
}
@media screen and (min-width: 769px) { // iPad landscape
}
// Desktop First
@media screen and (max-width: 320px) { // iPhone portrait
}
@media screen and (max-width: 480px) { // iPhone landscape
}
@media screen and (max-width: 768px) { // iPad portrait
}
@media screen and (max-width: 1024px) { // iPad landscape
}
@MatthewEppelsheimer
Copy link
Author

MatthewEppelsheimer commented Jan 8, 2012

I'm sure this already exists elsewhere, but I didn't immediately find it and it was easy to quickly re-create.

This is just a starting point.

TODO:

  • define wide screen break points

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment