A media query boilerplate for responsive design that covers iPhones, iPhone 5s, tablets, and iPads for viewing sites and applications in both portrait and landscape mode.
/** | |
* Note that the following media queries are intended to be used for the specified device or screen size | |
* in both portrait and landscape mode. | |
* | |
* Desktop queries are not provided since the default styles for most sites and applications typically focus | |
* on that for the default sites. | |
* | |
* Contributes, comments, and all that fun stuff always welcome :). | |
*/ | |
/* iPhone */ | |
@media (min-width: 320px) and (max-width: 480px) { | |
} | |
/* iPhone 5 */ | |
@media (min-width: 320px) and (max-width: 568px) { | |
} | |
/* Tablet */ | |
@media (min-width: 600px) and (max-width: 800px) { | |
} | |
/* iPad 2, 3, mini */ | |
@media (min-width: 768px) and (max-width: 1024px) { | |
} // iPad |
/* Handheld. Handles both portrait and landscape. */ | |
@media (min-width: 320px) and (max-width: 568px) { | |
} | |
/* Tablet. Handles both portrait and landscape. */ | |
@media (min-width: 600px) and (max-width: 800px) { | |
} |
This comment has been minimized.
This comment has been minimized.
I agree, to a point. I do think that content should drive responsiveness, but that doesn't change the fact that sometimes people ask for websites and applications to built with a specific device in mind. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
vilmosioo commentedOct 29, 2013
Media queries should be content specific, not device specific. The whole point of responsiveness is to NOT build device specific layouts.