概念

响应式网页设计最初是由 Ethan Marcotte 提出的一个概念：为什么一定要为每个用户群各自打造一套设计和开发方案？
Web设计应该做到根据不同设备环境自动响应及调整。当然响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式；我们应当向下兼容、移动优先。

基本要求

1. 内容区块可伸缩：内容区块的在一定程度上能够自动调整，以确保填满整个页面。
2. 内容区块可自由排布：当页面尺寸变动较大时，能够减少/增加排布的列数。
3. 边距适应：到页面尺寸发生更大变化时，区块的边距也应该变化。
4. 图片适应：对于常见的宽度调整，图片在隐去两侧部分时，依旧保持美观可用。
5. 内容能够自动隐藏/部分显示：如在电脑上显示的的大段描述文本，在手机上就只能少量显示或全部隐藏。
6. 导航和菜单能自动折叠：展开还是收起，应该根据页面尺寸来判断。
7. 字体比例缩放时，字体也保持缩放。

实现方式

• 约束视口

移动前端中常说的 viewport （视口）就是浏览器中用于呈现网页的区域。视口通常并不等于屏幕大小，特别是可以缩放浏览器窗口的情况下。手机端与PC端视口存在差异，电脑端的视口宽度等于分辨率，而移动端的视口宽度跟分辨率没有关系,宽度默认值是设备厂家指定的。iOS, Android基本都将这个视口分辨率设置为 980px。
为了解决这个问题，我们通常会在再页面的开头，加一句这样的语法。

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

width=device-width  // 视口为设备宽度（就是人设置的一个宽度）//不设置的话默认为980px
initial-scale=1.0   // 初始化的视口大小是1.0倍
maximum-scale=1.0    //最大的倍数是1.0倍
user-scalable=0      //不允许缩放视口

• 设置手机浏览器内核

在移动端，仅有四个独立的浏览器内核，分别为微软的Trident、火狐的Gecko、开源内核Webkit、Opera的Presto。
目前微软的Trident在移动终端上主要为WP7、8系统内置浏览器。Opera的Presto内核主要为 Opera Mobile、OperaMini、欧朋浏览器以及欧朋HD Beta版。Webkit内核的适用范围则较为广泛，Android原生浏览器、苹果的Safari、谷歌Chrome(Android4.0使用)都是基于Webkit开源内核开发的。

兼容的前缀：
1	-ms-
2	-moz-
3	-o-
4	-webkit-

• 媒体查询

CSS3媒体查询可以让我们针对特定的设备能力或条件为网页应用特定的CSS样式。如果没有媒体查询，光用CSS是无法大大修改网页外观的。这个模块让我们可以提前编写出适应很多不可预测因素的CSS规则，比如屏幕方向水平或垂直、视口或大或小等等。弹性布局虽然可以让设计适应较多场景，也包括某些尺寸的屏幕，但有时候确实不够用，因为我们还需要对布局进行更细致的调整。媒体查询让这一切成为可能，它就相当于CSS中基本的条件逻辑。

• rem响应式布局

rem是根元素字体的单位，比如 html{font-size:16px;} ，1rem相当于16px。
不仅仅可以给字体用，其他px单位的都可以用，比如设padding:2rem ，相当于32px。
选择性使用rem作为单位，这样在不同尺寸的设备上，通过修改根节点的font-size大小，实现等比例缩放。
假设设备宽度为600px，页面只有2个在一行的div，使用rem宽度如下设置

html{
    font-size:10px;
}
#div1{
    width:20rem;
    float:left;
}
#div2{
    width:40rem;
    float:left;
}

现在换到宽度为400px的设备上，保持比例相同，只有改变font-size即可

//在js计算字体大小，x为缩小比例
400/600=x/10
x=6.6
html{
    font-size:6.6px;/*实际上使用js动态改变，也可以配置媒体查询*/
}
/*以下保持不变*/
#div1{
    width:20rem;
    float:left;
}
#div2{
    width:40rem;
    float:left;
}

• 图片的响应式布局
  如果 max-width 属性设置为 100%, 图片永远不会大于其原始大小
  背景图片响应式调整大小或缩放
  如果 background-size 属性设置为 “contain”,背景图片将按比例自适应内容区域。图片保持其比例不变。

div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    border: 1px solid red;
}

如果 background-size 属性设置为 “100% 100%”,背景图片将延展覆盖整个区域

div {
    width: 100%;
    height: 400px;
    background-image: url('img_flowers.jpg');
    background-size: 100% 100%;
    border: 1px solid red;
}

• 固定布局（静态布局）、自适应布局、流式布局（百分比布局）、弹性布局

固定布局：顾名思义，网页上的所有元素的尺寸一律使用px作为单位。不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动条，如果大于这个宽度则内容居中外加背景，这种设计常见于pc端。

自适应布局：所谓自适应布局我们从百度上可以搜到如下的定义自适应设计指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。简单的来说自适应就是让同一个页面自动适应不同大小的设备，从而解决为不同设备提供不同版本的页面问题。

流式布局：流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）。网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用），例如，设置网页主体的宽度为80%，min-width为960px。图片也作类似处理（width:100%, max-width一般设定为图片本身的尺寸，防止被拉伸而失真）。屏幕分辨率变化时，页面里元素的大小会变化而但布局不变

弹性布局：弹性布局，又称“Flex布局”，是由W3C于2009年推出的一种布局方式。可以简便、完整、响应式地实现各种页面布局。而且已经得到所有主流浏览器的支持。