响应式设计，简而言之就是网页根据屏幕宽度，自动调整界面布局、展示内容、内容大小，力求在不同的设备下，内容都能以最佳的方式展现给用户。响应式设计网站中，内容就像水，设备就像容器，水自动适应各种不同尺寸的容器。
响应式网站一般可分为首页、栏目页、内容页、专题页四类。
图0-1 来源：http://tongji.baidu.com/data/screen
1. 首页框架
网站首页是一个网站的入口网页，故往往会被编辑得易于了解该网站，并引导互联网用户浏览网站其他部分的内容。
1.1 基本框架：
头部+导航+滑块+内容区域+底部。
图1-1 首页基本框架
1.2 头部：
在PC端通常包含标志、常用链接、联系方式、搜索、导航等，在移动端通常只显示logo和汉堡菜单。
图1-2 PC端头部常见类型
图1-3 移动端头部常见类型
1.3 导航条：
导航条在PC端通常位于标志的下方或右侧，在移动端使用汉堡包菜单。
图1-4 导航条常见类型
1.4 Slider：
宽度通常有2560、1920、1024、480px四种，以适应不同终端设备。
电脑端常用尺寸: 2560×532、1920×400；
平板端常用尺寸: 1024×360；
手机端常用尺寸: 480×200。
图1-5 Slider基本尺寸
为不同终端设备定制保证了slider的美观性与实用性，如在梨山宾馆网站中，为不同终端设备分别定制了slider，保证了slider的美观性与实用性。
图1-6 梨山宾馆首页slider
1.5 内容区域：
布局类型有通栏、等分(2、3、4栏…)、非等分(2、3、4栏…)。
图1-7 内容区域布局方式
布局变化方式主要有：挤压-拉伸、换行-平铺、删减-增加。
模块中的内容挤压-拉伸：
图1-8 挤压-拉伸
模块中的内容换行-平铺（最常见）：
图1-9 换行-平铺
图 1-10 Zicasso首页
模块中的内容删减-增加：
图 1-11 删减-增加
图 1-12 厚朴文化首页
1.6 底部：
PC端通常有版权信息、联系方式、友情链接、功能按钮等，移动端结合实际需求省略部分信息。
图1-13 PC端底部常见类型
图1-14 移动端底部常见类型
2. 栏目页框架
网站栏目页是网站里面的栏目页面，比如新闻栏目、产品栏目等。
2.1 基本框架：
头部+导航+横幅+面包屑导航+内容区域+底部。
图2-1 栏目页基本框架
2.2 Banner：
宽度通常有2560、1920、1024、480px四种，以适应不同终端设备。
电脑端常用尺寸: 2560×380、1920×280；
平板端常用尺寸: 1024×300；
手机端常用尺寸: 480×200。
图2-2 Banner基本尺寸
为不同终端设备定制保证了banner的美观性与实用性，如在哈佛大学网站中，为不同终端设备分别定制了banner，保证了banner的美观性与实用性。
图2-3 哈佛大学栏目页banner
2.3 面包屑导航：
结构：主页 >栏目页>文章页面
面包屑导航(BreadcrumbNavigation)这个概念来自童话故事"汉赛尔和格莱特"，当汉赛尔和格莱特穿过森林时，不小心迷路了，但是他们发现在沿途走过的地方都撒下了面包屑，让这些面包屑来帮助他们找到回家的路。
所以，面包屑导航的作用是告诉访问者他们目前在网站中的位置以及如何返回。
图2-4 面包屑导航
2.4 基本类型：
文字列表型、 图文列表型、图片展示型、文字内容型。
图2-5 栏目页4种基本类型
文字列表型，常用挤压-拉伸布局变化：
图2-6 文字列表型
图文列表型，有以下2种常见模式：
图2-7 图文列表型
图片展示型，常用换行-平铺布局变化：
图2-8 图片展示型
文字内容型，常用挤压-拉伸布局变化：
图2-9 文字内容型
3. 内容页框架
网站内容页指的是某一条具体的新闻或某一个具体的产品信息页面。
3.1 基本框架：
头部+导航+横幅+面包屑导航+内容区域+底部。
图3-1 内容页基本框架
3.2 内容区域：
标题+文章信息（时间、作者、点击数）+正文+分享链接。
图 3-2 内容区域基本框架
3.3 布局方式：
常用挤压-拉伸布局变化。
图3-3 挤压-拉伸布局变化
4. 专题页框架
专题页是指针对专一产品、事件、活动来策划的一个页面，通常有有活动型、产品促销型、产品展示型。
专题页的作用是：
1. 整合大量信息，吸引用户注意力；
2. 给网站带来流量，吸引部分用户；
3. 提高网站被搜索的几率；
4. 信息集中展示，方便用户浏览与查找；
5. 将大量数据分门别类的展示给用户。
图4-1 常见专题页类型
4.1 基本框架：
头部+导航+横幅+内容区域+底部。
响应式的专题页较规范，基本框架与普通页面类似，通常使用通栏结构。
非响应式的专题页形式和布局方式比较多样，可以根据主题内容灵活定制。
图4-2 响应式专题页基本框架
图4-3 梨山贡茶专题页
