什么是响应式网页设计?

随着移动设备的普及,各种移动设备的大小层次不齐,为了给用户提供更好的体验,2010年，Ethan Marcotte提出了"自适应网页设计"（Responsive Web Design）这个名词

在他的一篇文章 《Responsive Web Design · An A List Apart Article》中中他将已有的三种发开技巧（弹性图片，弹性网格布局，媒体与媒体查询） 进行了整合，命名为响应式网页设计,指可以自动识别屏幕宽度、并做出相应调整的网页设计,这是一种全新的思维模式,是针对各种设备实现完美布局的显示机制!

下面这张图片是在Ethan Marcotte的文章中，他通过一个实例展示了响应式Web设计在页面弹性方面的特性:

那实现响应式布局的具体方案是什么呢?

一个页面需要兼容不同终端，那么有两个关键点是我们需要去做到响应式的：响应式布局和响应式内容（图片、文字,多媒体等）!

具体的通过如下四个规则来实现:

规则一:移动设备允许网页宽度自动调整

由于移动设备的宽度和显示设备宽度是最明显的差别,移动端的视口太窄，为了能更好为CSS布局服务，所以提供了两个viewport:visualviewport和layoutviewport(敬请关注viewport和像素详解),默认情况下移动端默认的布局视口是980px ,如下图所示;

怎么解决呢?通过改变viewport值,让移动设备布局视口大小与设备可视区域一样

             <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">     

上面代码的意思是把width改成设备的宽度,这边的width指的就是布局的视口,这个布局的视频可以通过document.documentElement.clientWidth获得到,默认是980,(width= device-width),指宽度等于屏幕宽度 ,initial-scale=1.0指不缩放,这个属性(initial-scale)有默认的缩放值(device-width/980),所以pc端页面在移动设备上显示时会被缩小.

规则二:布局上不使用绝对宽度

具体指:布局时不使用固定像素,而是使用百分比或者width:auto. 目前常见的布局有三种,即:固定布局,流式布局和 弹性布局,而流式布局和弹性布局是响应式布局更好的方案

规则三:引用媒体查询(@media)的使用

上面所说的自动识别网页宽度,并作出相应调整,这个方案的实现,媒体查询起了关键性的作用

通俗点讲:媒体查询其实就是根据不同的媒体条件指定不同的css规则

语法:

         @media [not|only] type [and] [expr] {rules}     not|only：逻辑关键字     type：媒体类型     expr：媒体表达式(根据媒体特性设置媒体条件)     rules：CSS样式      

设备类型:

设备类型(media type):all所有设备screen 电脑显示器 网页开发中记住这两个就可以了

设备特性:

         width 视口宽度     height视口高度     device-width  设备屏幕宽度     device-height 设备屏幕高度     device-pixel-ratio设备像素比     orientation浏览器窗口的方向纵向还是横向，当窗口的高度值大于等于宽度时该特性值为portrait(竖向)，否则为landscape(横向)     
    

媒体查询使用:

媒体查询也可以使用在外部样式上，如：

                           <link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />??                        
                   

上面代码意思是:如果屏幕的宽度小于等于600px.则加载small.css文件

         转换成css中的写法为：?     @media screen and (max-width: 600px)  {?     选择器 {?     属性：属性值；?     }?     }     

         /* for 240 px width screen */     @media only screen and (max-device-width:240px){     //设备宽度小于等于240px时,以下样式起作用     selector{ ... }     }      /* for 320px width screen */     @media only screen and (min-device-width:241px) and (max-device-width:320px){     //设备宽度大于等于241px,小于320px时,以下样式起作用     selector{ ... }     }     

总结媒体查询:

所有的主流浏览器都支持媒体查询,但是老式ie6,7,8不支持,可以通过css3-mediaqueries-js实现兼容

             <!--[if lt IE 9]>         　　　　<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>         　　<![endif]-->     

Media Queries能在不同的条件下使用不同的样式，使用页面达到不同的渲染效果 (不同条件)也就是断点,这里说的断点不是传统意义的调试断点

一些常用的标准宽度:
320px(iPhone和其他一些移动设备)
769px(iPad)
1024 (PC端页面)
确定断点的一个原则是追随内容。让设计稿，内容来确定你的断点

规则四:图片的自适应

除了布局和文本，"自适应网页设计"还必须实现图片的自动缩放。实现的关键代码是:

    img { max-width:100%}

上面这种方式是最简单的办法,但是在移动设备上带宽是手机终端的硬伤,请求的图片还是PC上的大图；文件体积大，消耗流量多，请求延时长，因此导致的问题也是不可估量的 最好还是根据不同大小的屏幕，加载不同分辨率的图片,或者服务器端根据客户端提供的参数选择性加载图片也可以实现

通过以上几个规则,你就可以轻松实现PC端和移动端共用一套页面的响应式开发~