CSS: media queries and screen resolutions

Tweet

Today we are going to explore the media queries in CSS. We have already talked about @media, but recently I have used it to create different styles for different target browsers, so I would like to share my experiences.
What is really useful of media queries is that, according to what the user is using to browse your web site, you can change things to fit the target screen resolution. For example, when a user is using a smartphone or a tablet, you can change how the main menu is displayed: from a long series of links to a drop down menu.

But what are media queries? Let's see them.

The media queries

According to the w3c site,

"A media query consists of a media type and zero or more expressions that check for the conditions of particular media features."

and

"A media query is a logical expression that is either true or false. A media query is true if the media type of the media query matches the media type of the device where the user agent is running (as defined in the "Applies to" line), and all expressions in the media query are true."

Further more

"Several media queries can be combined in a media query list."

So what's the point? Well, you can create a style that applies only to targeted medias. That leads us to the target screen resolution.

Some examples

A fairly easy to understand example is using the max-width condition:

@media (max-width: 960px)
{
your style
}

The above style will apply only to targets with a screen resolution of 960px or less.
That is useful when you want to show or hide page elements according to screen resolution. For example - as said before - a menu, which will appear in its entirety when the screen resolution is over 960px otherwise it will be displayed as a drop down box, saving up space.

We can even combine two conditions:

@media screen and (min-width: 400px) and (max-width: 700px)
{
your style
}

The above example is considering targets with a viewport between 400px and 700px.

The screen resolutions

Said all the above, we actually need to know the target resolutions to apply styles accordingly. There are different web sites where you can find media queries for different targets.
I suggest you to see this CSS-tricks* page and the Media Query Snippets page for reference. Both the web sites have a fairly complete list of all possible media queries.

Enjoy and let me know if you've found the information useful.