| 摘要 | 第1-9页 |
| Abstract | 第9-11页 |
| 第一章 绪论 | 第11-18页 |
| 一、课题研究背景 | 第11-14页 |
| (一) 网页设计的发展及现状 | 第11-13页 |
| 1. 响应式网页设计的定义 | 第11-12页 |
| 2. 响应式建筑与响应式网页的关系 | 第12-13页 |
| (二) 国内外研究的现状 | 第13-14页 |
| 1. 国内的研究现状水平 | 第13-14页 |
| 2. 国外的研究现状及创新之处 | 第14页 |
| 二、研究目的与方法 | 第14-18页 |
| (一) 研究目的 | 第14-15页 |
| (二) 研究思路与方法 | 第15-16页 |
| 1.研究思路 | 第15-16页 |
| 2.研究方法 | 第16页 |
| (三) 研究内容结构 | 第16-17页 |
| (四) 研究意义 | 第17-18页 |
| 第二章 实现响应式网页设计的要素分析 | 第18-26页 |
| 一、响应式网页存在的必要性 | 第18-26页 |
| (一) 用户体验的需求 | 第18-20页 |
| (二) 支持小屏幕移动设备的重要性 | 第20-21页 |
| (三) 桌面版浏览器不同视口的需求 | 第21-26页 |
| 1.背景图平铺自适应 | 第21-22页 |
| 2.中心定位两侧自适应 | 第22页 |
| 3.单侧定位中心延展 | 第22-23页 |
| 4.瀑布流式设计 | 第23-26页 |
| 第三章 如何实现响应式网页设计 | 第26-41页 |
| 一、媒体查询：支持不同视口 | 第26-32页 |
| (一) 什么是媒体查询 | 第26-27页 |
| (二) 为什么响应式设计需要媒体查询 | 第27-28页 |
| (三) CSS3媒体查询特性 | 第28-30页 |
| (四) 如何在iOS和Android设备上使用媒体查询 | 第30页 |
| (五) 为特定视口设定CSS样式 | 第30-32页 |
| 二、流式布局（百分比布局） | 第32-35页 |
| (一) 为什么响应式设计需要流式布局 | 第33-34页 |
| (二) 将固定布局修改成百分比布局 | 第34-35页 |
| (三) 为媒体查询增加灵活性：em替换px | 第35页 |
| 三、用弹性图片解决视口缩放 | 第35-41页 |
| (一) 怎样使图片进行工作 | 第37页 |
| (二) 图片伴随视口缩放 | 第37-38页 |
| (三) 为不同的屏幕尺寸提供不同的图片 | 第38-39页 |
| (四) 为特定图片指定特定规则 | 第39-41页 |
| 第四章 响应式网页设计用户界面的实践 | 第41-53页 |
| 一、响应式网页设计中CSS3的实践 | 第41-47页 |
| (一) 增加动态导航的视觉体验 | 第41-44页 |
| (二) 网页字体的设计与分析 | 第44-46页 |
| (三) CSS3的颜色模式及透明通道的使用 | 第46-47页 |
| (四) 为背景增加灵活性 | 第47页 |
| 二、响应式设计中的HTML5的实践 | 第47-50页 |
| (一) HTML5的语义化 | 第47-48页 |
| (二) 可响应的HTML5视频 | 第48-50页 |
| 三、让设计超越媒介：响应不同屏幕和视口 | 第50-53页 |
| (一) 跨浏览器支持响应式设计 | 第50-51页 |
| (二) 让旧版本浏览器支持响应式设计 | 第51页 |
| (三) 导航链接转换为下拉菜单 | 第51-52页 |
| (四) 响应高分辨率的设备 | 第52-53页 |
| 第五章 关于响应式网页的毕业设计 | 第53-59页 |
| 一、毕业设计中响应式网页设计的实践 | 第53-57页 |
| (一) 网页整体结构设计 | 第53-57页 |
| 1.导航区域 | 第53-54页 |
| 2.首页部分 | 第54页 |
| 3.品牌风格 | 第54-55页 |
| 4.设计团队 | 第55页 |
| 5.特别推荐 | 第55-56页 |
| 6.品牌故事 | 第56页 |
| 7.产品类型 | 第56-57页 |
| 8.联系我们 | 第57页 |
| 9.页脚部分 | 第57页 |
| 二、毕业设计作品中存在的不足之处 | 第57-59页 |
| 总结 | 第59-62页 |
| 一、响应式网页设计未来发展的优势 | 第59页 |
| 二、响应式网页设计存在的缺陷 | 第59-60页 |
| 三、响应式网页设计的后续研究建议 | 第60-62页 |
| 注释 | 第62-65页 |
| 参考文献 | 第65-68页 |
| 致谢 | 第68-69页 |
| 附录A 在读期间所发表的学术论文 | 第69页 |