Learn CSS Media Queries

Posted on Tuesday May 29, 2012 / by Eric Potvin

The new CSS features (mostly in CSS 3) significantly improved the way we code our pages, specially for mobile devices, TV and many more. One of these new features is the Media Queries, or also known as the Responsive Web Design. This Media Queries consists of types that have specific properties mobiles devices, TV, desktop monitors (and more) that limits the styles to be executed or not. By executing these sets of rules, the presentation of the web pages changes dynamically without changing any HTML code.

Here's a concept:

We have a website with this layout:

old design layout

To something like this:

responsive design layout

Before the arrival of Media Queries, we had to hard-code and create multiples versions of our websites (HTML and CSS files). Although, this was very easy to identify which CSS file goes with a specific media type or HTML code, you have to create, and duplicate CSS codes in multiples CSS files.

By using Media Queries (and having the HTML that goes with it), you can now only use one CSS file and therefore, write smarter CSS. This way, maintaining your only HTML templates and only CSS files is very easy.

What is Media Queries?

A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. 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.

source: http://www.w3.org/TR/css3-mediaqueries/

Media queries allow designers to build multiple layouts using the same HTML documents by selectively serving stylesheets based on the user agent's features, such as the browser window's size.

Other parameters Media Queries deal with:

Media Queries features:

Media Queries provides lots of features that will allow you to easily distinguish the type of device the users are using. The features are:

Breakpoints:

When you build your media queries you have to find out the breakpoints of your site. Obviously here you don't want to add all the possible resolutions but the most common or generic one. Where the screen stop and when it starts to optimize your design?

Here's a list of the most common or generic breakpoints that applies to the most popular devices and desktops.

Examples

Here's a few examples of CSS media queries you can define in your CSS files.

For small devices

@media only screen and (max-width: 480px) { /* CSS codes */ }

For iPad

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { /* CSS codes */ }

For devices in a portrait mode

@media screen and (orientation: portrait) { /* CSS codes */ }

To match the 16:9 aspect ratio

@media only screen and (device-aspect-ratio: 16/9) { /* CSS codes */ }

To print a document

@media print { /* CSS codes */ }

Now, you can create css codes that belongs to the right media queries without duplicating any of your CSS code.