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