Skip to content

Instantly share code, notes, and snippets.

Created January 8, 2012 06:17
  • Star 11 You must be signed in to star a gist
  • Fork 9 You must be signed in to fork a gist
Star You must be signed in to star a gist
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
Copy link

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.


  • define wide screen break points

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