响应式Web设计(Responsive Web design)的理念是：集中创建页面的图片排版大小，可以智能地根据用户行为以及使用的设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相对应的布局。

响应式Web设计的方法

其实响应式Web设计的方法很简单，就是利用CSS3的媒体查询Media Queries和Viewport来解决问题的。

首先我们一起来看看Media Queries，这里我只会对其做一个简单的列举介绍。

通过媒体查询的设置，我们可以根据屏幕宽度、屏幕方向等各个属性来加载不同场景下不同的CSS文件来渲染页面的视觉风格。具体的使用方法有以下两种：

1、通过link标签：

<link rel="stylesheet" type="text/css" media="screen and (max-width: 479px)" href="testcssbywidth1.css" />

示例代码代表当当前屏幕宽度小于479px的时候，加载testcssbywidth1.css文件来渲染页面。

2、CSS中直接设置：

@media screen and (max-width:479px) {

    　　/* 具体的CSS属性设置 */

　　}    

对于Media Queries的一些常用属性，只对常用的几个做一个简单列举说明，其他的属性请各位自行查阅相关资料：

width：描述终端设备显示区域的宽度，接受max/min的前缀；

height：描述终端设备显示区域的高度，接受max/min的前缀；

device-width：描述终端设备屏幕的宽度，接受max/min的前缀；

device-height：描述终端设备屏幕的高度，接受max/min的前缀；

orientation：描述终端设备处于横屏还是竖屏的状态，取值分别为：landscape/portrait。

当我们调整浏览器大小的时候，上面通过媒体查询属性的操作就可以完成响应式Web设计的工作，但是这却不能满足移动终端的浏览器，因为移动浏览器默认页面是为宽屏幕设计的，所以会把他缩小来适应小屏幕，但是终端设备却无法识别正确的宽度，所以光靠媒体查询是解决不了移动终端设备的响应式Web设计的