Responsive Web Design
Responsive Web Design

Responsive Website

Responsive web design means a website that responds on all screen devices, i.e. desktop, Tablets, Smartphones and smart TV. To build a responsive website using media queries, configure viewport first, and then add media queries in css.

Responsive Website Requirement


Viewport

Viewport or meta viewport is a meta tag used in head. By using mets viewport, we can build a responsive website using media queries and the website will display properly on all screen devices.

Meta Viewport was introduced in HTML5 only. This means HTML5 based website with meta viewport can be mobile friendly.

Viewport Example

This will enable proper rendering of content with zooming.


<meta name="viewport" content="width=device-width, initial-scale=1.0">    

Viewport with user scalable no

This viewport will enable proper rendering on mobile devices, but no zooming allowed on touch devices.


<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">    

Avoid using Viewport with user scalable no in maximum sites. Only website where zooming is not allowed should user user-scalable no in viewport.


Media Queries

Media queries are used in css using @media rule to specify the type of media we are using. Like screen, print. See example

Media Types

Media Type mean the type of media device, like screen based devices, print for printers, all or speech based devices ( for disabled persons, like blind).


Media Features

Media Feature means the feature of media type. For example, screen means any screen, laptop or mobiles. So with screen, we use media feature like max-width, orientation etc to choose particular type of screen.

  • Width
  • Height
  • min-width
  • min-height
  • max-width
  • max-height
  • aspect-ratio
  • orientation

@media screen

@media screen enable css rule for screen devices only. For example, Desktops, Laptops, Smart TVs, Tabs , Ipads, Smartphones etc.


<style>                    
    @media screen{
        body{ font-family:sans-serif}
    }
</style>                    
                

@media print

@media print rule works only for printing devices. For example, laser printers, inkjet printers, dot matrix printers etc.


<style>                    
    @media print{
        body{ font-family:serif}
    }
</style>                    
                

How to build Responsive Website

To build a responsive website, we use media queries with media features. This combination can target css for a particular device based on media type and feature. See examples below.

If .container is our parent class having width 1200px, this fixed width will works only for screen size greater than 1200px, i.e. desktops, laptops, smart TVs etc.

For devices less than 1220px, we are using media rules to change width of.container as per screen size.

Responsive website for Desktop, Tablets and mobile


<style> 
    *{ margin:0; box-sizing:border-box;} 
    
    .container{ width:1200px; margin:auto}
   
    @media screen and (max-width:1220px){
        .container{ width:960px}
    }
    
    @media screen and (max-width:980px){
        .container{ width:760px}
    }
                      
    @media screen and (max-width:767px){
        .container{ width:100%}
    }
</style>                     
                

@media rule works on IE 9 and above. To force @media to works on Old IE 8 browser, use respond.js