CSS Media Queries - Easy way to use for mobile/tab responsiveness

CSS Media Queries - Easy way to use for mobile/tab responsiveness

Designing a responsive website without using frameworks was not so easy for me as a developer when I started writing CSS. Seeing the min-width, max-width, media query, various screen sizes like 750px used to confuse me until I finally got the hang of it.

Combining the knowledge of media queries and CSS grid/flexbox, you might not necessarily need a framework, especially when you are building a website that is not robust.

Before you can take full control of your viewport, you need to give the browser permission to scale and control the page dimensions. To do this, you just add the meta element below to your web pages.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

What exactly are media queries?

Personally, I understand media queries as setting limits and dictating what you want to happen within those limits. You are in control of setting the limits and also deciding what styling you want in the limits.

P.S: It is advisable to always design mobile first. When you do this, you write lesser codes and it is easier to build up to the desktop view.

Breakpoints for CSS

You set the limits by adding various breakpoints to indicate where you want the styling to start from and where you want it to add. The breakpoints I mostly use and can recommend include:

  • 576px

  • 768px

  • 992px

  • 1200px

These breakpoints have been serving me really well. Sometimes, I choose 1280px instead of the 1200px depending on the UI designs I am working with.

Let's use the media queries

Media Queries.gif

Let's replicate these various page sizes using media queries.

Let's start with writing the html code

media_html.png

And then the CSS code

css.png

By now, we should have this

media-queries-phone.png

To change the background color at a width of 576px and more, we write the lines of code below.

576px.png

This means, when the width of the screen gets to 576px , the box background changes to pink from the antiquewhite it previously was. And until there is another breakpoint, it remains so. The gif below shows what it should look like.

576px.gif

At 768px, the width of the boxes become 50% and the background color changes. We just have to add the media queries for the 768px breakpoint.

768px.png

This is what it should look like now.

tabsize.png

For the 992px and the 1200px breakpoints, the widths of the boxes become 33% and 25% respectively. Also, the p tag stops displaying when it gets to the 1200px breakpoint. Let's write the CSS lines of code.

992px.png

Let's see what we have now.

Media Queries.gif

With this, we have finally used media queries to make this simple webpage responsive. You just need to keep adding styles to each breakpoint to achieve any design you want.

To know more about media queries, you can also read:

**If this post was helpful, if you have any questions, or any contributions, please do let me know in the comment section. Thank you

**