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