TUTORIAL OF HOW TO CREATE RESPONSIVE WEB DESIGN

If you already have site or planing to create the site then you have to build the site which are browser compatibles. If your site is not browser compatible means not display well in desktop browser plus the mobile browser then you loss the visiting people from your sites. The response site only support the browser which supports the html5 and css3

To develop this kind of site your site must be responsive and its meaning is that it will be displayed good in most of the desktop and mobile browsers.
 

responsive design

 
Here are the steps which are required when you are building the responsive sites.

1) Viewport Mega Tag

Responsive website design is to define the particular viewport meta tag. The default scale will be disabled and the tag will tell the browser to use the device width as the viewport width. We need to include the following meta tag in your <head> section:

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

2) CSS3 Media Query

CSS3 media queries:  It’s a good to start with smaller widths – about 320-480 pixels – as this will require you to only include the very essential content.

3) Media Query for small screen
Set the media query to a max width of 480px or less

Syntax For Media Query

@media only screen and (min-width: 481px) {

}

4) Media Query for Medium screen

Set the media query to a min width of 769px and max screen of 980px

Syntax For Media Query

@media only screen and (min-width:769px) and (max-width:980px) {

}

5) Media Query for Large screen

Set the media query to a min width of 981px and max screen of 1100px

Syntax For Media Query

@media only screen and (min-width:981px) and (max-width:1100px) {

}

6) Media Query for Very Large Screen

Set the media query to a min width of 1101px

Syntax For Media Query

@media only screen and (min-width:1101px)  {

}

The above is the standard resolution for media query but many website developer change the setting according to their requirement of the site.

Leave a Reply

Your email address will not be published. Required fields are marked *