响应式网页设计研究开题报告

全文总字数：2202字

1. 研究目的与意义（文献综述）

互联网时代的到来，web技术迅猛发展，人们使用各式各样的方式进行网页的浏览，电脑、手机、平板让我们能够随时随地获取想要的讯息.上网工具的增多导致网站构建者需要面对各种不同尺寸的屏幕，不同的分辨率，这时响应式网页设计为我们提供了一种解决方案，一个网站能兼容多个终端。

响应式网页设计能够根据用户的设备尺寸，完美显示提供最佳的浏览体验。

响应式web设计作为一项比较新的技术，一种对于设计的思维模式的重新调整，充满了无限魅力，已经成为一种流行趋势，被 .net 杂志 列为 2012 年顶级网页设计趋势的第二名。

2. 研究的基本内容与方案

研究内容：一、响应式网页设计的模式；二、响应式网页设计布局；三、媒体查询；四、响应式媒体；五、针对老版本浏览器的兼容方案；六、利用HTML5和css3创建一个响应式页面！ 拟解决的关键问题：一、HTML5和CSS3的优点与利用HTML5和CSS3构建响应式页面的实现方式；二、运用media query限制元素的变动范围；三、像素布局的固定结构改为使用百分比布局创建的流动的弹性界面；四、设置自适应图片，能够为不同设备提供各种尺寸的图片。

写作提纲：一、响应式设计的简介，发展趋势；二、利用html5,css3创建基本的网页模型；三、网页如何实现响应式： (1).流动布局（Fluid grids）：网页使用百分比布局，用em替代px,实现响应； (2).媒介查询（Media queries）：查询检测媒体类型、特定媒体特征与其值，根据不同的视口设计合理的方案； (3).弹性图片（Scalable images）：实现图片随着流动布局随意缩放；四、响应式网页在不同浏览器之间的兼容性问题；五、使用调试工具(选用firefox的调试工具firebug)对网页进行调试；六、总结，响应式设计带来的网页设计上的新思路，如何理性合理的运用响应式设计创建网页。

3. 研究计划与安排

一、国外： ethan marcotte 在 a list apart 的文章中发明了术语 responsive web design (rwd)。

之后响应式被很多网站采用。

近些年，响应式网页设计发生了巨大的改变。

4. 参考文献（不低于12篇）

1、2014-11-2至2014-11-11：响应式设计作为一种新兴的网页设计方法，有足够的空间去研究，因此根据自己的研究方向与导师交流确定以响应式网页设计与创建作为毕业设计的选题。 2、2014-11-12至2015-1-18：根据所确定的选题查找相关书籍、期刊等，确定论文主要围绕响应式设计三个重要原则：Fluid Grids、Fluid Images、Media Queries来阐述，完成开题报告的撰写。 3、2015-01-19至2015-02-20：在此阶段，利用支持响应式的css框架网格系统实现网站布局，使用HTML5标签，利用css3为网站增添效果，引入JS库实现网站兼容，根据大纲完成论文初稿，。 4、2015-02-21至2015-05-16：与导师进行探讨，确认网站实现效果，根据渐进增强与优雅降级的概念，为老版本浏览器提供基本可用的体验，为先进的浏览器提供增强体验，允许不同浏览器之间存在些差异，在此基础上进一步完善修改论文，完成定稿，外文文献翻译工作。 5、2015-05-17至2015-06-17：利用浏览器调试工具，检查可能存在代码问题，完成论文的撰写，准备答辩环节。