Skip to content

Instantly share code, notes, and snippets.

@megmorsie
Last active August 30, 2016 12:52
Show Gist options
  • Save megmorsie/ee8631196fefb634c00a4e403069545d to your computer and use it in GitHub Desktop.
Save megmorsie/ee8631196fefb634c00a4e403069545d to your computer and use it in GitHub Desktop.
This file explains media queries, designing for mobile-first, and using min-width queries instead of max-width queries.
/**
* /////////////////////
* /// Media Queries ///
* ////////////////////
*
* Widths by Device:
* - iPhone 5 - Vertical = 320px
* - iPhone 5 - Horizontal = 568px
* - iPhone 6 - Vertical = 375px
* - iPhone 6 - Horizontal = 667px
* - iPhone 6 Plus - Vertical = 414px
* - iPhone 6 Plus - Horizontal = 736px
* - iPad - Vertical = 768px
* - iPad - Horizontal = 1024px
*
* Widths by Size:
* - iPhone 5 - Vertical = 320px
* - iPhone 6 - Vertical = 375px
* - iPhone 6 Plus - Vertical = 414px
* - iPhone 5 - Horizontal = 568px
* - iPhone 6 - Horizontal = 667px
* - iPhone 6 Plus - Horizontal = 736px
* - iPad - Vertical = 768px
* - iPad - Horizontal = 1024px
*
* Desktop Sizes (Full-Screen):
* - MacBook Pro (13in) ~ 1280px by 800px
* - MacBook Pro (15in) ~ 2560px by 1600px
* - 15.6" Laptop/18.5" monitor ~ 1366px by 768px
* - 20" monitor ~ 1600px by 900px
* - 21.5" monitor ~ 1920px by 1080px
* - 27" monitor ~ 2560px by 1440px
* (Keep in mind, most people don't use full-screen views on larger monitors!)
*
* Design/Code For Mobile First:
* - Why min-widths instead of max-widths?
* Let's say you designed a style for iPhone 5 when it was first released. You used max-width: 320px.
* Months later, the iPhone 6 is released and now your CSS needs updated to have another max-width media query,
* or else the iPhone 6 will display the desktop version of the site.
*
* Also, take into consideration that the main section of your stylesheet is loaded on EVERY device.
* Essentially, your phone version will be loading desktop styles, only to remove those styles when
* it gets down to loading your max-width queries.
*
* Think in terms of sidebar styling: if you want them to be 25% on desktop and 100% on mobile...
* Using the max-width approach means the CSS will set the sidebar to 25% width,
* then undo the 25% width when the browser reads the CSS file down to max-width: 320, when it resets the sidebar width to 100%.
* Clearly, this causes redundancy! To complete the same task using min-widths...
* You would just have a media query for a desktop size, such as min-width: 1025px that sets the sidebar to 25% width.
* The mobile style is already handled by browser defaults, which set div elements to 100% width and display: block.
*
* How to Design/Code For Mobile First:
* - Your mobile styles will be in the main section of the stylesheet.
* This includes things like displaying menu-toggle buttons for mobile menus,
* 100%/99% width items like the menu items and content area,
* changing widths or max-widths on images.
* - Then use your media queries to specify "breakpoints," or where your style no longer works.
* - Keep your media queries in order of the size, otherwise you will end up using !importants, which can make your code messy/ambiguous.
*
* Judgement Calls:
* - There will be gray area between sizes, for example 736px - 768px, where you can either style as a phone or a tablet.
* You can choose to have your breakpoint at min-width: 737px, and style the gray area as a tablet size,
* or you can have your breakpoint at min-width: 767px, and style the gray area as a phone size.
* (Personally, I would rather leave gray areas as the smaller-size design in case a device comes out that is just that size.)
*/
/* General styles go here, such as font, image, and button styles. */
/* Mobile styles go in the main section. */
body {
border: 5px solid #f00;
}
@media screen and (min-width: 767px) {
/* Assumes you are on a tablet because it is larger than most phone widths. */
body {
border: 5px solid #0f0;
}
}
@media screen and (min-width: 1025px) {
/* Assumes you are on desktop because it is larger than most tablet widths. */
/* You could set this lower (to around 800px - 1000px) if you don't mind iPad - Horizontal seeing a desktop version. */
body {
border: 5px solid #00f;
}
}
@media screen and (min-width: 1800px) {
/* Large desktop, such as a 21.5" monitor at (almost) full-screen. */
body {
border: 5px solid #ff0;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment