Learn CSS Media Queries

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:

To something like this:

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:

• Orientation
• Screen Resolution
• Color

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:

• width, min-width, max-width: The width media feature describes the width of the targeted display area of the output device.
• height, min-height, max-height: The height media feature describes the height of the targeted display area of the output device.
• device-width: The device-width media feature describes the width of the rendering surface of the output device.
• device-height: The device-height media feature describes the height of the rendering surface of the output device.
• orientation: The orientation media feature is portrait when the value of the height media feature is greater than or equal to the value of the width media feature. By default, orientation is landscape.
• aspect-ratio, device-aspect-ratio: The aspect-ratio or device-aspect-ratio media feature is defined as the ratio of the value of the width or device-width media feature to the value of the height or device-height media feature.
• color: The aspect-ratio media feature describes the number of bits per color component of the output device. If the device is not a color device, the value is zero.
• color-index: The color-index The color-index media feature describes the number of entries in the color lookup table of the output device. If the device does not use a color lookup table, the value is zero.
• aspect-ratio, device-aspect-ratio: The aspect-ratio or device-aspect-ratio feature is defined as the ratio of the value of the width or device-width media feature to the value of the height or device-height media feature.
• monochrome: The monochrome media feature describes the number of bits per pixel in a monochrome frame buffer. If the device is not a monochrome device, the output device value will be 0.
• resolution: The resolution media feature describes the resolution of the output device, i.e. the density of the pixels. When querying devices with non-square pixels, in "min-resolution" queries the least-dense dimension must be compared to the specified value and in "max-resolution" queries the most-dense dimensions must be compared instead. A "resolution" (without a "min-" or "max-" prefix) query never matches a device with non-square pixels.

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.

• 1200px and more
• 960px
• 768px
• 600px
• 480px
• 320px or less

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.