CSS Breakpoints: Mobile first versus Non-Mobile First Method

Nowadays, css breakpoints (media queries) in CSS as part of responsive design are very common to todays front-end developer. In this blogpost I’ll explain how, with a few CSS breakpoints, you can create a mobile version of your site.

There are two main methods. We’ll take a look at both of them. First of all, look at Mobile First Method.

Mobile First Method

/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */

@media only screen and (min-width: 320px) {}
/* Extra Small Devices, Phones */

@media only screen and (min-width: 480px) {}
/* Small Devices, Tablets */

@media only screen and (min-width: 768px) {}
/* Medium Devices, Desktops */

@media only screen and (min-width: 992px) {}
/* Large Devices, Wide Screens */

@media only screen and (min-width: 1200px) {}

Non-Mobile First Method

/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */

@media only screen and (max-width: 1200px) {}
/* Medium Devices, Desktops */

@media only screen and (max-width: 992px) {}
/* Small Devices, Tablets */

@media only screen and (max-width: 768px) {}
/* Extra Small Devices, Phones */

@media only screen and (max-width: 480px) {}
/* Custom, iPhone Retina */

@media only screen and (max-width: 320px) {}

As you see, for the second way main target is desktop computers. For the first way, target is – mobile devices.

It’s recommended to prefer first way.

Tural Aliyev

I'm traveloholic, musicphile, technoholic, cinephile, workaholic software developer

Istanbul http://tural.us

Subscribe to Tural's Notebook

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!