1、第一步，在页面头部加入viewport标签，这样可以使网页宽度等于屏幕宽度。
代码如下：
<meta name="viewport" content="width=device-width,initial-scale=1"/>
2、第二步，实现自动探测屏幕，具体是这样的，引入css3的media query，根据屏幕大小不同来调用不同的css。
<link rel="stylesheet" type="text/css", media="screen and (max-width:767px)" href="phone.css" />
另外再加一个768px的，调用style.css,这样就可以实现自动了。
3、第三步，不要使用绝对宽度，用百分比来表示宽度。
4、第四步，字体不要使用绝对字体px，要使用相对字体rem
5、第五步，图片和多媒体的自适应，图片采用img(max-width:100%)
多媒体采用objet embed(max-width:100%)
6、第六步，按照以上思路来写页面和布局，就能轻松实现响应式页面设计开发了。简单吧！
