With the introduction of the various ways that people view the internet from mobile phones, tablets, large monitors to wall sized screens, web sites have been presented a challenge with how to best present their content.

CSS3 has introduced the Media Queries model to assist the web developer with ability to create layouts for any and all screen sizes.

In the past HTML4 and CSS2 supported media-dependant style sheets. These style sheets were aimed at designing for different media types, such as "print" or "screen".

Media Queries go beyond this with allowing the developer to design to specific pixel width and height of screens. This allows for being able to change the layout without needing to change the content or haivng a separate web site for mobile devices.


How to add @media queries to your web page

You link to the style sheet just how you would to any style sheet in the <head> section of your HTML document. You can approach this in two ways. You can add the @media section right into your main style sheet or you can add additional style sheets that just contain the @media information.

Example:

<link rel="stylesheet" type="text/css" href="/css/custom.css" />
<link rel="stylesheet" tyoe="text/css" href="/css/custommobile.css" />


Syntax for @media

In the style sheet you add the @media sections in the following manner:

Example:

@media (min-width: 767px) and (max-width: 960px) {
    /*** SELECTORS AND PROPERTIES GO HERE **/
}

The above example is the simplest way to specify the media - the screen is between 767px wide an 960px wide. You do not have to sepcify "@media screen" or "@media all" though you can choose to do so if it is necessary to discern it from other media types.

You may also target whether the viewing area is "portrait" or "landscape" with the following example"

Example:

@media (orientation: portrait) {
    /*** SELECTORS AND PROPERTIES GO HERE **/
}


Specifying the media type with the <link>

The media type required can be put right into the <link> for the specific style sheet.

Example:

<link rel="stylesheet" media="screen and (min-device-width: 850px") href="/css/custommedia.css" />

When you use this approach, the styling in the style sheet no longer needs to be contained in "@media...." sections, unless you are dividing the styling up for various screen widths within the style sheet.


Example of @media sections in a style sheet

Following is an example of some styling that might show up in a style sheet aimed at multiple screen sizes:

Example:

@media (min-width: 960px) {
    #container {width: 945px; margin: 0 auto);}
    #leftCol {width: 30%; float: left;
    #rightcol {width: 30%; float: right)
}

@media (min-width: 768px) and (max-width: 959px) {
    #container {width: 100%;
    #leftCol {width: 20%; float: left;
    #rightcol {width: 20%; float: right)
}

@media (min-width: 480px) and (max-width: 767px) {
    #container {width: 100%;
    #leftCol {width: 100%; float: none;
    #rightcol {width: 100%; float: none;)
}

@media (max-width: 480px)  {
    #container {width: 100%;
    #leftCol {width: 100%; float: none;
    #rightcol {display: none;)
}