---

Quick Summary: Mobile first media queries use min-width and desktop first media queries use max-width

Media queries in CSS allow to you specify style rules that apply only to specific screen sizes. This is a great way to achieve responsive design and is how many grid-based CSS libraries (such as Bootstrap) achieve responsiveness. Since we are typically worried about screen width, there are two important media query rules that apply: min-width and max-width.

The difference between desktop-first and media-first media queries lies in how any CSS rules that are not inside of a @media block are treated. In desktop-first mode, these rules apply only to the largest screens. In mobile-first mode they apply to the smallest screens.

Desktop-First Media Queries

Below is an example of stylesheet written with desktop-first media queries. Notice how it uses max-width rules.

...
// all rules outside of @media queries apply to devices 1201px and above
...

@media (max-width: 1200px) {
	...
	// rules here apply to devices from 993px to 1200px (inclusive)
	...
}
@media (max-width: 992px) {	
	...
	// rules here apply to devices from 769px to 992px (inclusive)
	...
}
@media (max-width: 768px) {
	...
	// rules here apply to devices from 0px to 768px (inclusive)
	...
}

Mobile-First Media Queries

Below is an example of stylesheet written with mobile-first media queries. Notice how it uses min-width rules.

...
// all rules outside of @media queries apply to devices from 0px to 767px (inclusive)
...

@media (min-width: 768px) {
	...
	// rules here apply to devices from from 768px to 991px (inclusive)
	...
}
@media (min-width: 992px) {	
	...
	// rules here apply to devices from 992px to 1199px (inclusive)
	...
}
@media (min-width: 1200px) {
	...
	// rules here apply to devices 1200px and greater
	...
}

Which one should you use?

As the names suggest, mobile-first media queries are better for mobile centric design and vice-versa. This is again due to how the rules "outside" of the @media blocks are treated. If you are expecting your mobile designs to be more complex, mobile-first media queries are better because most of your rules will apply to mobile screens, and you will just be "modifying" the base design for larger screens.

If you expect your desktop design to be more complex, it is better to use desktop-first media queries. Your base CSS rules will apply to large screens by default and you will just be "modifying" this base template on progressively smaller screens.