What breakpoints should I use for mobile first development?

The joy of mobile-first development is that it supports the DRY (don't repeat yourself) method! It is a lot easier to start simple and then work your way up to a more complicated design as opposed to starting with a complicated design (desktop) and then tearing it apart to get to a simple mobile version.

When you start your CSS, the first styles you write will apply to your mobile device. You will write them outside of a media query! Next, write your tablet styles in a media query of min-width: 768px. Everything in your mobile styles will apply to your tablet unless you change the property value. Lastly, write your desktop media query with a min-width of 1200px. Again, everything in your mobile styles will apply to tablet and desktop unless you change the property value. And everything in your tablet styles will apply to your desktop unless you change the property value.

We use min-width because it allows for everything in the mobile styles to apply to the whole page. If we were to use max-width everything would stop at the breakpoint, and you would end up writing the same styles multiple times!

Here’s an example of how this works:

body{ 
	background-color: red; 
} 

h1{ 
	font-size: 1em; 
} 

p{ 
	width: 80%; 
} 

@media (min-width: 768px){ 
	h1{ 
	font-size: 1.5em; 
	} 
} 

@media (min-width: 1200px){ 
		p{ 
			width: 60%; 
	} 
}

The background color for this site will always be red because you wrote it in the mobile style, which gets applied to tablet and desktop unless you change the property value within your media queries. Further, on the mobile device the h1 font size is 1em, but on the tablet and desktop it is 1.5em. Similarly, the paragraph width is 80% on mobile and tablet devices. On desktop, the paragraph width is 60%.