Media Queries and Breakpoints 2022

#webdev #css #productivity #tutorial

Responsiveness is an important part of modern web development.
However in the early days we had less number of devices and had the liberty to write as many media queries as we wanted.

With time, the screen ratios changed and still keep evolving.
So how do we create a perfect responsive website or app?

Let's see how!👇🏻

What are Media Queries?

Media Queries are chunks of CSS code that trigger when the rules provided to it are satisfied.

These are the queries that help make the app or site responsive.

The rules are called breakpoints.

What are breakpoints?

p {
  font-size: 2rem;
}

@media (min-width: 62rem){
  p {
    font-size: 1.75rem;
  }
}

In the above code, the breakpoint is the condition or expression enclosed within ellipses, ().

We can have as much breakpoints as we want. However this is not encouraged and eventually gets really confusing to handle.

Which breakpoints to use?

On one of the early days when I had just started learning web dev I thought that instead of typing random numbers in the breakpoint expressions, I divided 3-4 sections by looking at the different devices available in the browser's toggle device toolbar.

Although we have multiple devices, we can simplify them for phones, tabs and bigger screens.

For mobiles we can use 43rem which translates to around 688px, for tabs 62rem translating 992px, and anything above, 82rem or 1312px goes for wider screen.

There's one more question that I asked a lot and probably you might have too which is, "Should I use max-width or min-width"

Should I use max-width or min-width?

You might have heard a popular term mobile first approach. The code above is written in that style.
Now, this approach uses min-width breakpoints. This technique is also used in popular CSS frameworks like Bootstrap and sites like CSSTricks

So it is in my opinion a subjective thing. You could follow either mobile first approach or desktop first.

However, I have experienced that while writing in mobile first style the lines of code decreases and most of the time we don't have to write extra code for wider screens.

A cool tip: