Responsive HTML

Standard

An example of creating responsive design using CSS.

There are a range of ways to develop responsive website using CSS and smart use of meta tags.

<meta name="viewport" content="">

This tag was introduced by Apple and now has support from a few browsers. It was introduced to override the initial view size of pages loaded on a mobile device – to overcome the issue of the mobile browser automatically resizing the viewport to fit all content in the page; as auto sizing the browser is not always suitable to the content displayed, using this method is equivalent to using a CSS reset to remove default styles.

For example, if one’s mobile design is intended to be 320px in width, one can specify the default viewport width:

<meta name="viewport" content="width=320">

Using CSS, one can use the @media and max/min widths to set breakpoints to cause the layout to change.

There are two ways to define the width:

1) By adding the media attribute to CSS references, meaning the CSS file can only be used for the widths defined, i.e.

<link rel="stylesheet" media=screen and width (min-width: 720px) and (max-width: 980px) href="path/to.css" />

2) By using the @media in the CSS file, i.e.

@media all and (max-width: 960px) and (min-width: 720px)  {
        body {
                background: #ccc;
        }
}

One can also use CSS to target the view-port instead of using metatags. Using CSS for webkit browsers and CSS specifically for IE10. (IE9 and below don’t support the viewport).

@viewport{
        zoom: 1.0;
       width: extend-to-zoom;
}

This isn’t supported by all browsers like IE, which instead uses an IE10-specific CSS. 

@-ms-viewport {
       width: extend-to-zoom;
       zoom: 1.0;
}