Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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) {
}
@vilmosioo
Copy link

vilmosioo commented Oct 29, 2013

Media queries should be content specific, not device specific. The whole point of responsiveness is to NOT build device specific layouts.

@tommcfarlin
Copy link
Author

tommcfarlin commented Nov 14, 2013

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