Screen resolution of mobile device are usually not very large, the width is below 600px, while PC usually has a resolution over 1000px. It is not an easy task to display the same content with satisfying effect on different screens with different resolution.
One common solution is to provide different webpages for different devices. For example, they may provide a mobile version, iPad version or PC version. This can ensure the effect but it is troublesome to maintain all these different version of webpages, also it will increase the design difficulties.
Someone proposed : "Design once, use everywhere". Make one webpage adjust its size and layout automatically on different devices according to different screen resolutions.
1. Concept of Responsive Web Design
In 2010, Ethan Marcotte first mentioned Response Web Design. It refers to the web design which can automatically recognize the screen size and adjust the webpage layout.
He made an example, if the screen resolution is larger than 1300px, these six pictures will be put on one line.
2. Allowing automatically adjustment of webpage width
How do we achieve Responsive Web Design? It's not so difficult.
First, we add one line of code at the head of the webpage
<meta name="viewport" content="width=device-width, initial-scale=1" />
viewport is the default width and height of the webpage, the meaning of the above code is : the default width of the webpage is equal to the device width, the initial scale is 1.0, i.e, the initial size of the webpage will be 100% of the screen size.
All major browsers support this setting, including IE9, for those old versions of browsers such as IE6,7,8, we need to use css3-mediaqueries.js.
<!--[if lt IE 9]>
　　　　<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
　　<![endif]-->
3. Don't use absolute width
Since webpage will adjust its layout according to screen size, so we cannot use absolute width to set the layout, we cannot use those elements with absolute width, neither.
In detail, CSS code cannot set the width property like
width:xxx px;
Instead , we should use the percentage
width: xx%;
or
width:auto;
4. Relative font size
Also font cannot have absolute size(px). instead we should use relative size(em);
body {
　　　　font: normal 100% Helvetica, Arial, sans-serif;
　　}
The above code says the font size is 100% of the default font size of the page which is 16px.
h1 {
　　　　font-size: 1.5em;
　　}
Then size of h1 is 1.5 times of the default font size of the page which is 24px
small {
　　　　font-size: 0.875em;
　　}
small element has font size which is 0.875 times of the default font size of the page, which is 14px.
5. Fluid grid
The meaning of Fluid Grid, the position of each section is fluid, not fixed.
.main {
　　　　float: right;
　　　　width: 70%;
　　}
　　.leftBar {
　　　　float: left;
　　　　width: 25%;
　　}
6. Selective loading CSS
The core of Responsive Web Design is the introduction of Media Query module of CSS3. It means it will detect the different screen width and load relative CSS file.
<link rel="stylesheet" type="text/css"
　　　　media="screen and (max-device-width: 400px)"
　　　　href="tinyScreen.css" />
The code above means if the screen width is less than 400px, it will load the tinyScreen.css
<link rel="stylesheet" type="text/css"
　　　　media="screen and (min-width: 400px) and (max-device-width: 600px)"
　　　　href="smallScreen.css" />
if the screen width is between 400px and 600px, it will load the smallScreen.css
We can also use
　@import url("tinyScreen.css") screen and (max-device-width: 400px);
to load CSS file
7. @media of CSS
In the same CSS file, we can choose different CSS file according to the different screen size.
@media screen and (max-device-width: 400px) {
　　　　.column {
　　　　　　float: none;
　　　　　　width:auto;
　　　　}
　　　　#sidebar {
　　　　　　display:none;
　　　　}
　　}
The above code says if the screen width is less than 400px, then the column will have no float and the width will be adjusted automatically and the sidebar will not be diaplyed.
8. Fluid image
One line of code
img, object { max-width: 100%;}
Old version of browsers don't support max-width, we can write it as
img { width: 100%; }
Also on IE, we can use its unique command
img { -ms-interpolation-mode: bicubic; }
or we use imgSizer.js of Ethan Marcotte
　 addLoadEvent(function() {
　　　　var imgs = document.getElementById("content").getElementsByTagName("img");
　　　　imgSizer.collate(imgs);
　　});
Author : 阮一峰 Source : http://www.ruanyifeng.com/blog/2012/05/responsive_web_design.html
