Responsive layouts for mobile web

1. The concept of responsive layout


The responsive layout was a concept proposed by Ethan Marcotte in May 2010. Nutshell. Is that a site can be compatible with multiple terminals--not a specific version number for each terminal.

This concept was created to address mobile internet browsing.

Responsive layouts provide a more comfortable interface and a better user experience for users of different terminals. And with the popularity of big-screen mobile devices today. It cannot be described by the general trend.

2.Media Rule


1) Definition and use
Media rule is a style rule that is used to define different media types/different devices.

In Css2 it is called media types, which is called Media querys in CSS3.
Use:
• Browser height and width
• Height and width of the device
• Orientation of the device (Landscape/portrait)
• DPI
and more

2) CSS Syntax
Embedding @media in style sheets
@media not|only mediatype and (media feature) {
Css-code;
}

/* When the viewable area of the browser is less than 980px */
@media [Only] screen and (max-width:980px) {
#wrap {width:90%; margin:0 auto;}
#content {width:60%;p adding:5%;}
#sidebar {width:30%;}
#footer {padding:8% 5%;margin-bottom:10px;}
}
/* When the viewable area of the browser is less than 650px */
@media screen and (max-width:650px) {
#header {Height:auto;}
#searchform {position:absolute;top:5px;right:0;}
#content {width:auto; float:none; margin:20px 0;}
#sidebar {width:100%; float:none; margin:0;}
}
Using @media in link
<link rel= "stylesheet" media= "mediatype and|not|only (Media feature)" href= "Mystylesheet.css" >

<link rel= "stylesheet" type= "Text/css" media= "only screens and (max-width:480px), only screens and (max-device-width:48 0px) "href=" Link.css "rel=" external nofollow "/>

3) Viewport
You need to add viewport to the head of the page, which is the declaration of setting the original size display and scaling on the mobile device.
<meta name= "viewport" content= "width=device-width; Initial-scale=1.0;user-scalable=yes ">
Demo
Test Site: http://responsivator.queenslandwebplan.com/
demo:http://2012.dconstruct.org/

Responsive layouts for mobile web