Media Queries

#css

Over my time at Flatiron School I have become very interested in Frontend design. With each project I have completed, I have tried to get better at designing aesthetically pleasing browser experiences for the user. One area that I have not been paying much attention to is the responsiveness of my applications. When I would make my screen smaller or view my application on my phone, everything would become a jumbled mess. This got me thinking about how to make my applications respond to different size screens that they are being viewed on. After a few google searches and some research, I found that a great way to tackle this issue is through using media queries in your css file.

Media queries are an essential part of responsive web design. They allow you to change the layout of your application depending on the size of a users viewport. A quick example is how a navbar will collapse into a dropdown menu if you are viewing it on your phone, but then will have the full navbar with each navlink displayed along the top of your screen if your viewport is bigger. Things like this can make your users experience while visiting your app much better.

Media queries can become complex but simple media queries are relatively easy to read and understand. I will go over a simple media query and hopefully it helps you understand the basic idea of what a media query does and how you can use them yourself.

To use media queries the syntax is @media not/only _mediatype_ and (_expressions_).

@media is expressing to css that what you are writing is a media query.

The not/only is specifying whether to not include the mediatype that follows, or to only include the mediatype that follows.

Mediatype defaults to all but you can specify if you want to use this query for three other options:

Print - used for printers
Screen - used for smartphones, laptops, tablets, computer screens
Speech - used for screenreaders

Expressions is when or how you want your design to change depending on what your write in your expressions.

So a simple example of a media query is:

@media only screen and (min-width: 300px) {
       background-color: blue;
}

What this example will do is set the background color to be blue only when the viewport is 300px wide or wider. So the background color would be the original color white if the viewport that a user is viewing your app on is less than 300px. But if you were viewing this app through a viewport that was greater than 300px, the background color would be blue.

This is not a very practical example but it shows that you can use media queries to make your application responsive depending on the size of a users viewport. This can be a very useful tool to make your applications more user-friendly.

I hope this blog helped to understand the basic idea of a media query and I plan on practicing and expanding my knowledge of media queries so that I can more design dynamic, responsive applications.