HTML5 Responsive Design - Media Queries (Part 1)

Overview

Media Queries, a mainstay of Responsive Web Design, is a CSS3 module allowing page elements to adjust to features of the rendering device. These features can be width, height, visual density, orientation and/or resolution.

In other words, Media Queries help us build prototypes which respond (by resizing, fitting) to the features of mobile device, iPad, tab or a Printer rendering it.

Example:-

Setting specific style rules for specific media type (print, screen).

<link rel="stylesheet" href="print.css" media="print" />

 

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

 

Media Queries for Responsive Design

In this session, we are going to discuss media queries for responsive designs in detail. Let's begin by seeing what exactly a 'media query' is and how we use it?

The What?

As such, two components make up a media query: a media type (which is basically the “medium” rendering the content) and one or more expressions, involving media features (width, height, visual density etc). We are going to discuss media-features in detail later in this session.

For now, the media type and media features are used together (using Logical keywords) to define the conditions based on which we assign different stylesheet rules to different elements. Following is a list of 'Logical keywords' and examples showing their use:

Logical Keywords :

/* 'and' method Implementation */
- and

     @media (min-width: 700px) and (orientation: landscape) { 
        .pageWrapper { width:50%;  border: green 1px solid;  }
    }

/* 'comma-separated' method Implementation */
- comma-separated lists

    @media (min-width: 700px) and (min-width: 520px), (min-width: 1151px) {
        .pageWrapper { width:50%; border:red 1px solid;  }
     }

/* 'not' method Implementation */
- not

    @media not all and (monochrome) {
        .pageWrapper { width:50%; background:#000;  }
     }

 

Media Query Features :-

There are many media query features which give unique identity to particular screen or mode. The following table lists those features:

Feature	Min or Max property	Description
Width	Both (min-width or max-width)	Width of device display section
Height	Both (min-height or max-height)	Height of device display section
Device-width	Both (min-device-width or max-device-width)	Width of device.
Device-height	Both (min-device-height or max-device-height)	Height of device.
Orientation – portrait or landscape	No	Orientation of device.
Aspect-ratio – Ratio(width/height)	Both	Ratio of width to height, expressed as two integers separated by a slash (e.g., 16/9)
device-aspect-ratio– Ratio(width/height)	Both	Ratio of device-width to device-height

 

The How: Methods of Using Media Query:-

Normally, we include media query by using '@media', but there are actually 3 ways to implement media queries:

• 1. By Using separate Stylesheets in HTML — < link rel="stylesheet" href="small_device.css" media="screen and (max-width: 640px)" / >
• 2. By Using @media in css file — @media screen and (max-width: 640px) {css here}
• 3. By Using @import in CSS — @import url("small_device.css") screen and (max-width: 640px).

We will now take these one by one:

 

1.  By using separate stylesheets in HTML

 

Media queries can be implemented to the tag through the "media" attribute to use an alternate stylesheet based on, for instance, device type and orientation mode.

Below are some examples.

/* Style sheet for small screen and upto 640px width */

<link rel="stylesheet" media="(max-width: 640px)" href="max_640px.css" />

/* Style sheet for large screen resolution and upto 700px width*/

<link rel="stylesheet" media="(min-width: 700px)" href="min_700px.css" />

/* Style sheet only for Protrait Orientation*/

<link rel="stylesheet" media="(orientation: portrait)" href="portrait_mode.css" />

/* Style sheet only for Landscape Orientation*/

<link rel="stylesheet" media="(orientation: landscape)" href="landscape_mode.css" />

 

2.  By Using @media in CSS file

Through this one can put multiple conditional (here, based on media sizes) styles in a single stylesheet. Some examples:

    
    /* Default Style element for the Web page*/

    body {
        background-color: black;
        text-decoration: none;
        color:white
    }

    /* To Apply Style element for "Min-Width=700px and for Larger Resolution"*/

    @media all and (min-width: 1001px) {
        body { color: red; background-color:yellow;   }
    }

    /* To Apply Style element only From 700px width to 1000px width*/

    @media all and (max-width: 1000px) and (min-width: 700px) {
        body {  color: blue;  background-color:white;   }
    }

    /* To Apply Style element only From 520px width to 699px width and as well as for min-width=1151px and large resolution*/

    @media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
        body { color: yellow; background-color:green;   }
    }

    /* To Apply Style element only for those screen or device which have min-device width = 640px */

    @media (min-device-width: 640px) { 
        body { color: blue; background-color:grey;   }
    }

    /* To Apply Style element only for those device or screen, which have 16/9 ratio */

    @media screen and (device-aspect-ratio: 16/9) { 
        body { background:purple; font-size:14px; }
    }

    /* To Apply Style element only for Landscape Mode or Orientation */

    @media (orientation:portrait) {
        body{ background:purple; font-size:12px; }
    }

    /* To Apply Style element only for Portrait Mode or Orientation */

    @media (orientation:portrait) {
        body { background:purple; font-size:16px; }
    }   

3.  By Using @import in CSS

By this method one can import an external CSS file based on specific conditions. Examples:

   
 /* phone-portrait mode */
    @import url(“portraitMode_stylesheet.css”) only screen
    and (min-width:320px )
    and (max-width: 568px )
    and ( orientation: portrait );

    /* phone -landscape Mode*/
    @import url(‘landscapeMode_stylesheet.css’) only screen
    and (min-width:481px )
    and (max-width: 568px)
    and (orientation: landscape );

    /* ———- Tablets in portrait mode ———- */
    @import url(“tablet_portrait_stylesheet.css”) only screen
    and (min-width: 569px )
    and (max-width: 1024px)
    and (orientation: portrait);

    /* ———- Tablets in Landscape mode ———- */    
    @import url(‘tablet_landscape_stylesheet.css’) only screen
    and (min-width: 569px)
    and (max-width: 1024px)
    and (orientation: landscape);

 

End of this Session

In this session, we covered some basic concepts and how-to's of media queries for responsive design. In the next session, we will continue with some other important concepts that help us achieve Responsive Design compliance through media queries.

For more Information, Visit: Responsive Design