随着计算机技术的不断发展,网络用户使用小屏幕移动设备(如平板电脑、手机)上网已成为趋势,另外超大屏幕显示器也在快速的普及,从而导致上网设备的尺寸差距与日俱增。面对形形色色的终端设备和千差万别的屏幕分辨率,传统的网页设计方法显得有些力不从心,而设计师不可能为每种终端设备专门设计一套网站系统。本文尝试通过响应式设计的开发方式,构建一个使系统页面随接入设备的显示大小不同而自行响应、动态调整布局结构、元素规格样式,将相同的内容以不同的格式呈现给不同设备的用户的系统。通过设计这样的交互系统,可以达到利用同一套代码,使网站内容在PC、平板电脑以及智能手机浏览器上都能正常的显示的目的。本论文的工作,针对上海市松江大学城体育视频网站的需求进行设计开发。论文首先对课题的研究背景和国内外研究现状做了较为深入的分析。在此基础上,首先对课题研究中所用到的响应式设计技术、以及与之相关的技术进行了介绍。然后对项目网站进行全面的需求分析,之后利用面向对象的思想和技术进行了网站系统的概要设计、详细设计、系统实现和系统测试。系统完成的主要功能包括：1)运用HTML5结合jQuery技术进行自定义视频播放器；2)运用Media Query技术实现不同终端上页面的特定样式；3)每张页面都采用弹性布局,使页面元素可以随页面显示大小变化而进行调整；4)利用Viewport技术对网页缩放进行控制；5)完成系统管理,如视频管理、学校管理、用户管理。通过该网站的建设和使用,规范了网站在多平台上的设计,方便用户在任意终端设备上欣赏视频,为校园体育文化的推广提供了很好的平台。该系统在今后还将进一步发挥重要作用,为广大视频门户网站提供信息支持。