Skip to content

Instantly share code, notes, and snippets.

@MatthewEppelsheimer

MatthewEppelsheimer/breakpoints.css

Created January 8, 2012 06:17
Show Gist options
  • Star 11 You must be signed in to star a gist
  • Fork 9 You must be signed in to fork a gist
  • Save MatthewEppelsheimer/1577446 to your computer and use it in GitHub Desktop.
Save MatthewEppelsheimer/1577446 to your computer and use it in GitHub Desktop.
Download ZIP
Responsive Break Point Media Query Boilerplate
Raw
breakpoints.css
// 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

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