Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • HTML5 Responsive Design - Media Queries (Part 1)

    • 0
    • 2
    • 2
    • 0
    • 0
    • 0
    • 0
    • 0
    • 2.33k
    Comment on it

    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).

    Print:

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


    Screen:

    <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.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: