What is a media query used for in CSS?

When I started learning CSS in January 2022, it wasn’t long before I came across media queries. Initially, using media queries to effectively create 3 different versions of my site, one for desktop, mobile, and tablet, was daunting. As soon as I understood how to use media queries, where to place them and most importantly, what the respective breakpoints were, making responsive websites became a breeze. This article is going to help you understand exactly that!

Media queries create style rules that will only apply if a certain condition is met. For example, you might use a media query to make the text on your website bigger when viewed on a desktop computer, but smaller when viewed on a mobile phone. Media queries in CSS can be useful for making sure your website looks its best no matter what device it’s being viewed on, making your website truly responsive. Want to learn more? Keep reading!

What is a media query used for in CSS?

Simply put, we use media queries in CSS to make our websites look good on all devices. By default, a website will look different when viewed on a desktop computer, a mobile phone, or a tablet. This difference is because the CSS used to style a website is designed for certain screen sizes and resolutions.

For example, if you have a website designed for a desktop computer, the text will be bigger, and the layout will be wider than if you viewed it on a mobile phone. This is because desktop computers have larger screen sizes and resolutions than mobile phones.

However, with media queries, we can tell the CSS to ignore the default styles applied for a specific device and instead use the styles that we specify within our media query; this is done through breakpoints (we will get to these later).

This means that we can have different CSS rules (breakpoints) for each type of device, which is helpful when it comes to creating responsive websites.

Where did media queries in CSS come from?

Media queries have been around since 2007 when they were first introduced in CSS. They were created to help with the issue of responsive design, which is when a website is designed to look good on all screen sizes, from desktop computers down to mobile phones. At the time, there weren’t many responsive websites around, so media queries were seen as more of a luxury than a necessity. However, as responsive design has become more and more popular, so too has the use of media queries.

Nowadays, most web browsers support media queries, which means that we can use them in our CSS code to target specific devices and create responsive websites that look great on all screen sizes. So if you’re looking to create a responsive website, then learning how to use media queries is a must!

What are the benefits of media queries in CSS?

1. Easier to maintain
2. More user-friendly
3. Improves website speed
4. Helps with search engine optimization (SEO)

One of the main benefits of using media queries is that it makes it much easier to maintain your website. By having different style rules for different devices, you don’t have to worry about your website looking bad on any device. Instead, you can focus on creating a website that looks great on all devices.

A responsive website is much more user-friendly than one that isn’t. The user doesn’t have to scroll left and right or up and down to see all the content with a responsive website. Everything is displayed in a way that is easy to view and navigate.

Another benefit of using media queries is that it can help to improve your website’s speed. By only loading the CSS rules needed for the device, you can help reduce your website’s load time.

Finally, using media queries can also help with your website’s SEO. A responsive website is more likely to be ranked higher by search engines than a non-responsive website.

There are many benefits to using media queries in CSS. Using media queries can create a website that looks great on all devices, is more user-friendly, and can even help with your website’s SEO.

What are the disadvantages of using media queries in CSS?

1. Not all devices support media queries
2. Can be complicated to set up
3. May slow down your website

Unfortunately, not all devices support media queries. This means that you may not be able to use all of the features of media queries on some devices. For example, if you want to use a media query to target a specific device, but that device doesn’t support media queries, then the media query won’t work.

Another disadvantage of using media queries is that they can be quite complicated to set up. If you’re not familiar with how they work, creating a media query that targets the device you want can be difficult. Don’t worry, after reading this article, it won’t be complicated anymore!

Depending on how you write your media queries a potential downside is that they may slow down your website. When you’re using a lot of media queries, your website has to load more CSS rules, which can slow it down.

As you can see, there are both benefits and disadvantages to using media queries in CSS. Overall, the benefits outweigh the disadvantages, but it’s important to be aware of both before deciding whether or not to use them on your website.

So, now that you know what media queries are and the benefits and disadvantages of using them, let’s take a look at some common mistakes that people make when using media queries.

Common mistakes when using media queries in CSS

The most common mistake for beginners is forgetting to target all devices. When creating a responsive website, it’s important to target all devices, not just certain ones. If you don’t target all devices, your website may not look good on some.

Beginners also often make the mistake of using too many media queries. When you’re using a lot of media queries, your website has to load more CSS rules, which can slow it down. Try to limit yourself to only using the ones you need.

Media queries are a powerful tool that can help you create a responsive, but with great power comes great responsibility, so use them wisely!

Where should I place media queries in CSS?

Now that you know all about media queries, the next question is: Where should I place them in my CSS file?

Part of the answer can come down to personal preference, while part of it comes down to best practice.

The best practice is to always include your media queries at the bottom of your file and not at the top. The reason for this is that CSS is read from top to bottom, and therefore if the media query is placed at the top of the file it could get overwritten by later code. You can learn more about how CSS styles cascade in this article

A way around this is to use the !important at the end of a CSS parameter to make it overwrite everything else, but this really isn’t recommended and can cause issues when debugging your code.

Next is a personal preference. Do you include them in your HTML file? Do you include them in your main CSS file? Or do you create a separate file just for your media queries?

At the end of the day, the right answer is the one that works best for you. Personally, I create a separate media.css file that includes all my media queries. I find this easiest as if I need to debug something that has to do with a media query, I know exactly what file to go to.

In my separate media.css file, I also visually separate all my queries relating to tablets and mobile devices, so I know where to go when looking for a problem.

What media query breakpoints should you use?

Now that you know all about media queries, the next question is: What media query breakpoints should you use for desktop, mobile and tablet devices?

Surprisingly there is no definitive answer to this question as it can depend on the individual website and its requirements. However, there are some general guidelines that you can follow.

Media query breakpoints for desktop

For desktop devices, a good range to use is between 769px and 1200px, which will cover a wide range of devices, from small laptops to desktop monitors. 768px – 1024px generally being for smaller screens while 1025px – 1200px is accepted for larger screens.

Media query breakpoints for tablets

A good range for tablet devices is between 481px and 768px. This range will target the majority of tablets on the market.

Media query breakpoints for mobile phones

A good range for mobile devices is between 320px and 480px. This range will target most smartphones as well as some smaller tablets.

It’s important to keep in mind that these are just general guidelines, so you may need to adjust them depending on your specific website.

How to write a CSS media query

When writing a CSS media query, you can either set it that different rules are applied for a minimum or maximum width.

The difference between the two is that a media query with a min-width will apply the set rules when the device’s width falls below the specified value, while a media query with a max-width will apply the set rules when the width of the device falls above the specified value.

Here is an example of a media query written with the min-width:

/* This media query will apply the set rules when the width of the device is below 768px */
@media  (min-width: 768px) {  
    .background{
      overflow: hidden;
      padding: 60px 75px;
    }

Here is an example of a media query written with the max-width:

/* This media query will apply the set rules when the width of the device is above 1200px */
@media  (max-width: 1200px) {  
    .background{
      overflow: hidden;
      padding: 60px 75px;
    }

Should you use a min or max-width media query?

They both effectively do the same thing, so in this case, it can depend on personal preference and, at times, the individual website and its requirements.

However, if you are unsure, it’s generally recommended to use the min-width media query as it will be more versatile and cover a wider range of devices.

I personally use the min-width method because I find it easier to understand. Using max-width always made me feel like I was looking at something the wrong way around, but that is personal.

 Another reason why I used min-width is that I build my websites with a “mobile-first” approach.

What is a mobile first approach?

A mobile-first approach means you build your site as it would render on mobile devices first and then scale it up. By applying a mobile-first approach, I use the min-width to tell the CSS rules when it should change, so when the screen size is greater than 768, then adjust to the tablet design.

Conclusion

Media queries are an important tool to have in your CSS arsenal, especially when catering for multiple devices. They allow you to target different screen sizes and devices, which can help improve the overall user experience of your website.

So, now that you know all about media queries, where to put them in your CSS file, and device breakpoints, it’s time to start using them!

Good luck!

Click here to get our FREE CSS Properties Cheat Sheet for Beginners to help you on your coding journey!