CSS Media Queries for Responsive Design

These days everyone is obsessed with their phones. So when it comes to development and programming everyone is thinking mobile first. Many apps need to be completely redesigned to operate on a mobile platform. But if you’re a new dev, and you simply want your project looking and working normally on a phone’s browser, using media queries is an easy and effective way to achieve this.

What Is A Media Query?

Basically a media query just allows you to write some conditional code into your CSS. Ex: if on desktop do this, if on mobile do this. There are many ways to make an app responsive for mobile, but I think media queries are probably one of the easiest ways to manage this. You are simply adding different parameters to your CSS for when the screen size is smaller.

@media (some condition) {
    CSS selector {
       CSS
    }
}

This is at the most basic level what a media query might look like. You wrap your normal CSS within the media query, and it will only run when the condition is met. This can have a multitude of use cases but I’m going to focus on responsive for mobile design here.

Responsive For Mobile Design

So we know that our apps need to achieve this but what does it even mean to be responsive for mobile? At the most basic level it means that as the screen size gets smaller (on a mobile device vs a full desktop) the design of your app responds accordingly. You can see this if you take the browser window on your desktop and shrink it to be as thin as it will go. Whatever page you’re on will change in some way. We want to make sure it’s changing in the right way so users will have the best experience possible with our app on a smaller device.

Media Queries For Mobile

A quick google search will tell you that the average width of a phone screen is 480 pixels or px. So let’s round that up to 500px, and now we just need to say if the screen is less then 500px do this. This is what it can look like in your CSS

So now once the width goes below 500px the h1 will turn red. Let’s say you want it to be blue on desktop and change to red on mobile it would look something like this:

Here the default color of the h1 will be blue, so on a desktop it’ll be blue. Once the screen width goes below 500px it’ll change to red. Something very important to note is that the media query must come after the original call of a CSS selector. Otherwise the file will just run the default if it comes after a media query. The easiest way to avoid this is just to make sure all of your media queries are at the end of your CSS file. The great thing is that you can put multiple CSS selectors within one media query. If you’re concerned with what’s happening at a certain screen width, you can put everything you want to change under one media query handling the screen width.

So now you’re handling multiple selectors under the same media query.

Other Things To Know About Media Queries

So you may be wondering how does the media query know that you want the screen to have a max width of 500px. Well it doesn’t, if written out the way I have above it defaults to “all”, which basically means any type of media device including but not limited to the screen. You could also write it specifically to look at the screen like this:

Now you also need to include the keyword “and” to say look at the screen and its width. Also by using the keyword “and” you can string conditions together like this:

Now we’re checking if the screen width is below 500px and its orientation is landscape.

Wrapping Up

Media queries are a really easy tool to have more control over your app, and give you a simple strategy to begin making an app more responsive for mobile. Considering how your app will look on a phone is necessary in our current day and age, and something that can feel overwhelming for new devs. Media queries are not the end, but a great place to start in approaching the mobile first world of development.