Why min-width instead of max-width?
Let’s say you designed your site when the iPhone 5 was first released. You used max-width: 320px for your iPhone/mobile style. 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 your sidebar 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: 320px, 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 that particular design no longer works.
- Keep your media queries in order of the size, otherwise you will end up using !important a lot, 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.
I posted a stylesheet on GitHub with a dummy example (and lots of comments):
View on GitHub