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

This comment has been minimized.

Show comment
Hide comment
@vilmosioo

vilmosioo Oct 29, 2013

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

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

This comment has been minimized.

Show comment
Hide comment
@tommcfarlin

tommcfarlin 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.

Owner

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