Introducing CSS 3 Media Queries

   —   
In the Introducing Responsive Design post we explored the basic concepts of a responsive website. We saw there were three major components; fluid grid layouts, CSS 3 media queries, and fluid images and media. In this post we will look at CSS 3 media queries and how they can be used for designing responsive web sites.

 

Getting Started

Starting with CSS 2.1 media types were used to apply CSS for both screen and print. You may remember these wonderful statements.

<link rel="stylesheet" type="text/css" href="style.css" media="screen" /> <link rel="stylesheet" type="text/css" href="printfriendly.css" media="print" />

Sadly, CSS 2.1 media types were very limited and supported only the following generic media types.

Media type

Description

all

All devices.

braille

Intended for devices that provide braille tactical feedback.

handheld

Intended for typically small screen and limited bandwidth devices.

embossed

Intended for paged braille printers.

projection

Intended for projection devices.

screen

Intended for speech synthesizers.

tty

Intended for media using fixed pitch character grids.

tv

Intended for television type devices.

With CSS 3 media queries have drastically extended what was available. They can be used to identify a specific capability and then apply different styles based on the query. We can even combine queries that test for several features using semantic operators like AND and NOT. Features include width, height, max-width, max-height, device-height, orientation, aspect-ratio, resolution and more. Rather than looking for a specific type of device they look at the capability of the device. For example, detecting the user has a larger device like an iPad. The real value of media queries is that they allow conditions that can be screened for. This means that we can look for certain conditions that we can define and then create a conditional style sheet that we can then use.

The generic syntax of the CSS 3 media query is:

@media <media types> { /* media-specific rules */ }

Media queries consist of media type expressions that evaluate to either true or false. The result evaluates to true if all expressions in the media query are true. When a media query is true the corresponding style sheet or style rules are applied following the normal CSS cascading rules.

Lets take a look at a simple example of using a media query by creating the following HTML page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css"> @media screen and (max-width: 600px) { p{ color:Red; font-size:x-large; } } </style> <title>Simple Media Query Example</title> </head> <body> <p> Welcome to Media Queries!</p> </body> </html>

Lets run this in the browser at full screen (1936 x 1056) to see the following screenshot.

Lets decrease the browser size to 360 X 357 to see the updated style as shown in the following screenshot.

In this example, when this HTML page is decreased the p tag becomes Red and the font-size becomes extra-large based on the following media query expression.

@media screen and (max-width: 600px) { p{ color:Red; font-size:x-large; }

CSS 3 Media Queries are able to evaluate a broad range of common features. The following is a list of the most common features, but always, make sure to check your target browser for support.

Feature

Value

Accepts Min/Max

Description

width

Number

Yes

Width of the targeted display area.

height

Number

Yes

The height of the targeted display area.

device-width

Number

Yes

The width of the devices entire screen.

Device-height

Number

Yes

The height of the devices entire screen.

orientation

Portrait/landscape

No

The orientation of the device. When width is larger than height landscape is returned, otherwise it returns portrait.

aspect-ratio

Ratio

Yes

Detects the ratio of value of the width media to the value of the height.

device-aspect-ratio

Ratio

Yes

Detects the ratio of value of the device-width value to the device-height value.

color

Integer

Yes

Detects the number of bits per color component of the device.

color-index

Integer

Yes

Number of entries in the color lookup table of the output device.

monochrome

Integer

Yes

Number of bits per pixel in a monochrome frame buffer.

resolution

Resolution

Yes

The resolution of the output device. Common units are dpi and dpcm

Scan

progressive/interface

No

The scanning process of tv output devices.

Grid

1 or 0

No

Detects whether the output device is a grid or bitmap based device.

Quick Examples

As you can see the usage of media queries is broad and provides a very rich set of information. To help make it easier I have tried to collect and list some of the common device examples to get started. If you have ones to add or better approaches please leave a comment.

Smartphone (portrait and landscape)

/* Smartphones (portrait and landscape) ----------- */ @media screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ }

Smartphone (landscape)

/* Smartphones (landscape) ----------- */ @media screen and (min-width : 321px) { /* Styles */ }

Smartphone (portrait)

/* Smartphone (portrait) ----------- */ @media screen and (max-width : 320px) { /* Styles */ }

iPads (Portrait and landscape)

/* iPads (portrait and landscape) ----------- */ @media screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ }

Ipads (landscape)

/* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ }

Ipad (Portrait)

/* iPad (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ }

Desktops and laptops

/* Desktop and laptop ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ }

Large screen

/* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ }

iPhone 4

/* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ }

Advanced Scenarios

Lets create a more advanced scenario with the following HTML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Simple Media Query Demos</title> <style type="text/css"> .wrapper { border: solid 1px #666; padding: 5px 10px; margin: 40px; } .viewing-area span { color: #666; display: none; } /* max-width */ @media screen and (max-width: 600px) { .one { background: #F9C; } span.lt600 { display: inline-block; } } /* min-width */ @media screen and (min-width: 900px) { .two { background: #F90; } span.gt900 { display: inline-block; } } /* min-width & max-width */ @media screen and (min-width: 600px) and (max-width: 900px) { .three { background: #9CF; } span.bt600-900 { display: inline-block; } } /* max device width */ @media screen and (max-device-width: 480px) { .iphone { background: #ccc; } } </style> </head> <body> <div class="wrapper one">This box will turn to pink if the viewing area is less than 600px</div> <div class="wrapper two">This box will turn to orange if the viewing area is greater than 900px</div> <div class="wrapper three">This box will turn to blue if the viewing area is between 600px and 900px</div> <div class="wrapper iphone">This box will only apply to devices with max-device-width: 480px (ie. iPhone)</div> <p class="viewing-area"><strong>Your current viewing area is:</strong> <span class="lt600">less than 600px</span> <span class="bt600-900">between 600 - 900px</span> <span class="gt900">greater than 900px</span></p> <p>Adapted from a tutorial by <a href="http://www.webdesignerwall.com">Web Designer Wall</a></p> </body> </html>

Lets run this in the browser at full screen (1936 x 1056) to see the following screenshot.

As you decrease the browser size have a little fun with the included media queries.

Conclusion

The samples presented here are basic examples and hopefully provide a starting point for your own development. In the real world, its important to make an informed decision where to focus any development efforts. The first step should always be to understand your target audience and the most common resolutions. The code shown in this post is available for download here.

Share this article on   LinkedIn Google+

Thomas Robbins

I spend my time working with partners and customers extending their marketing and technology to the fullest.

Comments