三合一开发之响应式页面设计开发

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、第六步，按照以上思路来写页面和布局，就能轻松实现响应式页面设计开发了。简单吧！