Responsive Web Design Tutorial and Reference

Published on: November 9, 2014   Last Updated on : November 11, 2017   Posted By : WebDesignReference

Learn Responsive Web Design with easy demo and examples.

Responsive Web Design Tutorial And Responsive Web Design Reference Guide:-

Responsive Web Design : To create a mobile friendly or device independent website you need to learn the Responsive Web Design concept. Responsive web design is easy to learn, a responsive web page can be designed using Media Queries or use any Front End Development Framework like Bootstrap framework.

@Media Rule: is used for defining rules for different devices or media like screen, print, tablet, mobile phones etc.

 
 

Most commonly used media types are:

  • All : It is used for all type of media or devices.
  • Screen : It is used for all computer screen types.
  • Print : It is used for print devices.

Example : Use of CSS3 Media Queries for different media devices.

@media all and (min-width:320px) and (max-width:768px)
{
header {
    width:auto ;
    display:block ;
    }

article {
    width:auto ;
    display:block ;
      }
}

@media screen and (min-width:320px) and (max-width:768px)
{
header {
    width:auto ;
    display:block ;
    }

article {
    width:auto ;
    display:block ;
      }
}

@media print and (min-width:320px) and (max-width:768px)
{
header {
    width:auto ;
    display:block ;
    }

article {
    width:auto ;
    display:block ;
      }
}
 
 

Responsive demo template example:

Responsive Web Template Tutorial Using Media Queries

Bootstrap responsive demo template example

Responsive Web Template Tutorial Using Bootstrap
 

Leave a Reply