Media queries make websites look good on different devices. Here, we explain what exactly media queries are and how they work.
What are media queries?
Media queries are CSS instructions that are integral to creating websites. Media queries allow content to adapt to various screen resolutions, with different CSS instructions being used for different screen sizes. In simple terms, they are a way to make websites look good on a phone or a desktop computer. Media queries are a central component of responsive web design.
When are media queries used?
Media queries mean that site owners can put in place different CSS instructions depending on screen size. For example, you could make your site appear with blue text on a mobile phone but with green text on a desktop computer.
However, what most people tend to use media queries for is to make their web pages look good across all screen types. Almost anything that you can do with CSS, you can also do with media queries. Media queries determine the size of a screen and apply the corresponding CSS for the size of screen registered.
How to use media queries
Media queries are a part of your CSS file. Using the aforementioned example, let’s take a look at how we would use media queries to instruct that we want blue text to appear when using mobile, but green when on a desktop computer.
The CSS that would do this would look like this:
P{color:blue;}
@media(min-width:900px){p{color:green;}}
Let’s break down this instruction to better understand it.
Quite simply, the instruction P{color:blue;} tells us that text colour will be blue.
The second line is a media query: @media(min-width:900px){p{color:green;}} This line gives the instruction that if the screen is wider than 900 pixels the colour of the text should be green.
Still a bit unsure of what all these components mean? Understandable. Let’s take an even closer look at the media query.
@media – This is the media query announcement, notifying that a media query will follow.
(min-width:900px){} – This means that if the screen is at least 900 pixels wide, the CSS between the brackets should be applied. This sets the circumstance in which this media query should be applied.
p{color:green;} – This is CSS instruction that should be applied if the screen is wider than 900 pixels, the action that should be taken if this circumstance occurs.
Media queries for responsive design
In that example you might’ve noticed that the desktop version with green text was explicitly stated, however the mobile version with blue text was not.
Our CSS was:
P{color:blue;}
@media(min-width:900px){p{color:green;}}
Here, the first line is standard CSS (non conditional instructions), whilst the second line is a media query (conditional instructions). Therefore, if someone using a mobile visits that page they will see blue text, as the normal CSS is used. Green will only ever appear on a screen size 900 pixels or above which prompts this media query.
This is called a mobile first design. In short, you just need to know that media queries are a conditional set of instructions and non conditional instructions are for the smallest screens (like mobiles). You’re using CSS to say that if one thing happens, this next step should. Media queries therefore allow site owners to put in place specific instructions for particular conditions, depending on screen size. They are an essential tool, especially as mobile use becomes more and more widespread.