Course notes 7
syllabus | schedule | exercises | assignments | class notes | resources | students | ARTC courses

Reaching Towards Responsive Design - Media Queries

Media Queries are a CSS3 Declaration which allow us to check against certain physical characteristics of a device before applying to related styles. The idea is not new however, and in fact, is an extension of Media Types which have been in active use for a while. You may have encountered media types before when linking external CSS sheets; the Meta tag "media" allows you designate viewing methods like "screen", or "print", as the condition under which the external stylesheet will be loaded. For example:

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

In the above situation, two stylesheets are linked into the html document. The first, style.css, will be loaded when a visitor first navigates to the page, fulfilling the media type condition of "screen". The second though, print.css, will not. This external stylesheet has a media type of "print", therefore, it will only be loaded when the the web page is being viewed by a printer!

Media Types can also be used directly inside a stylesheet to delegate different style blocks to different viewing methods. We can use @media declarations to wrap style blocks. The @media will be checked first, and if the media type specified is met, the style block will be processed.

Bear in mind though, that with this approach, the entire stylesheet is still being downloaded, but not used. Often you will want to avoid making a user download data they are not going to use, especially when targeting a mobile environment.

Here is an example of media types within the stylesheet:

 	<style>
    a#mediaTypes {
        color:green;
    }
    
    
    @media print {
        a#mediaTypes {
			 color:red;
        }
    }
	</style>
 
If you print this page, this text will be red, not green.

A full list of all media types can be seen at the official documentation on W3.org.


Media Queries

Once you understand the idea behind media types, media queries will be easy, as they are just an extension of media types. Being able to discern between the method of viewing the device represents is great, but Media Queries allow us to take it a step further and target device characteristics.

We can check for such features such as device-width, orientation, color, and aspect ratio. Numerical features will even accept a "max-" or "min-" prefix allowing for very fine-tuned recognition. The basic format of a media query is as follows:

media="media type and (feature : value )"

The evaluation of a media query is similar to any other conditional statement; if all necessary pieces resolve true, the associated stylesheet will be loaded. Like other conditionals, you can add as many statements as you need, and the logical operators "and", "not" can be used to make comparisons. To create "or" statements, place media queries in a comma separated list. Some examples follow:

	<link rel="stylesheet" type="text/css" media="screen and 
       (max-device-width: 799px)" href="style.css" />
    

The stylesheet will be loaded if the width of the screen is less than 800px.


	<link rel="stylesheet" type="text/css" media="screen not 
       (min-aspect-ratio: 1/1)" href="style.css" />
    

The stylesheet will be loaded if the screen width and height are NOT in a 1 to 1 ratio.


	<link rel="stylesheet" type="text/css" media="screen and 
        (min-device-width: 241px)" href="style.css" />
    

The stylesheet will be loaded if the screen width is greater than 240px.



Since media queries are an extension of media types, they too, can be used directly within the stylesheet. Again, deciding to place the extra styles in the same sheet, or linking in another one is a decision between downloading the additional data, and making the user execute an additional HTTP Request, connecting to the server an extra time to download the new file.

 <style>	
    div.block {
        width:150px;
        height:150px;
        background-color:green;
        padding:15px;
        float:left;
        margin:10px;
    }
    
    div.block:before {
        content:"viewport is more than 800px";
    }
     
	@media screen and (max-width: 800px)  {
        div.block {
            background-color:red;
            float:none;
         }
         
         div.block:before {
             content:"viewport is less than 800px";
         }
   }
 </style>   
 
Here is the above code in practice; re-size the browser to see the changes. The exact same effect could be achieved with the media query referencing an external stylesheet :
Below is another example, using images, which not only changes the positioning, but actually swaps the images themselves out!
<style>
    ul#animals {
        width:420px;
    }
    ul#animals li {
        padding:2px;
        list-style:none;
        float:left;
    }
    ul#animals li.even {
        width: 200px;
        height: 200px;
        background-repeat: no-repeat;
        background-image:url(hippo01.jpg)
        
    
    }
    ul#animals li.odd{ 
        width: 200px;
        height: 200px;
        background-repeat: no-repeat;
        background-image:url(hippo02.jpg)
    
    }
    @media all and (max-width: 400px)  {
        ul#animals {
			width:120px;
        }
        
        ul#animals li.even{ 
            width: 100px;
            height: 100px;
            background-repeat: no-repeat;
            background-image:url(fox01.jpg)
        }
        
        ul#animals li.odd{
            width: 100px;
            height: 100px;
            background-repeat: no-repeat;
            background-image:url(fox02.jpg)
        }
    }
</style>
 

Immediately useful media query expressions include:

  • min-device-width
  • max-device-width
  • min-width
  • max-width
  • aspect-ratio
  • orientation ( landscape or portrait)
  • resolution

Device-Width vs Width

These two queries, while appearing similar, are in fact very different. Understanding the difference is important when attempting to target specific devices and screens. device-width refers to the physical size of the entire screen. Re-sizing or zooming a window will not change the device-width. width on the other hand, refers to the viewport; the active dimensions of the window. This value IS affected by re-sizing and, on mobile devices, zooming.

Media Query Support

Given that Media Queries are a CSS3 specification, they are unfortunately not supported 100%, however, their adoption is wide enough that they can be a vital tool in providing device support.

(www.icanuse.com)

As the table shows, Media Queries are supported by the three major mobile browsers, and all major desktop browsers except Internet Explorer. In addition, other mobile browsers that support Media Queries include:

  • BlackBerry WebKit
  • Bolt
  • Dolfin
  • Firefox
  • MicroB
  • Nokia WebKit
  • Phantom

Responsive Web Design

Responsive web design is a method of approaching the myriad of screen sizes and device systems that says the experience and environment should respond to the capabilities of the user's viewer. This means that while the website may not look exactly the same on every screen, the website can adapt to the each specification and not forego functionality.

By combining the ideas of fluid layouts and media queries one can create a responsive design for mobile devices. The Media Queries allow for the overall layout to be adjusted to each device category, and then the fluid nature of the design will adapt the content to the specific screens.