Skip to content

Instantly share code, notes, and snippets.

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

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.


  • define wide screen break points

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