Responsive CSS Breakpoints
When dealing with responsive design, there are several paths you can take. You can use a framework like bootstrap, which has all of the responsive column classes that you need. Or you can build your own using media queries. If you choose to build your own, you can go with a desktop first approach or a mobile first approach.
Desktop First
With a desktop first approach, you write more specific styles that get applied as the screen gets smaller.
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 960px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 480px) {
}
@media screen and (max-width: 320px) {
}
Mobile First
With a mobile first approach, you write more specific styles that get applied as the screen gets larger.
@media screen and (min-width: 1200px) {
}
@media screen and (min-width: 960px) {
}
@media screen and (min-width: 768px) {
}
@media screen and (min-width: 480px) {
}
@media screen and (min-width: 320px) {
}
Notice that we use the min-width property instead of the max-width property.
Experts say that it’s better to go with a mobile first approach because it forces you to think more about what to put on the page. But if you already have a non-mobile design built, you can add responsive elements by using the desktop first approach.