Skip to content

Instantly share code, notes, and snippets.

@tommcfarlin

tommcfarlin/complete-mobile-media-query-boilerplate.css

Last active July 22, 2018 06:57
Show Gist options
  • Save tommcfarlin/7168435 to your computer and use it in GitHub Desktop.
Save tommcfarlin/7168435 to your computer and use it in GitHub Desktop.
Download ZIP
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.
Raw
complete-mobile-media-query-boilerplate.css
/**
* 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
Raw
simple-mobile-media-query-boilerplate.css
/* 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

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

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