This file explains media queries, designing for mobile-first, and using min-width queries instead of max-width queries.

media-queries.css

/**
 * /////////////////////
 * /// 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;
    }
}