1、隨著計算機技術(shù)的不斷發(fā)展，網(wǎng)絡(luò)用戶使用小屏幕移動設(shè)備（如平板電腦、手機）上網(wǎng)已成為趨勢，另外超大屏幕顯示器也在快速的普及，從而導(dǎo)致上網(wǎng)設(shè)備的尺寸差距與日俱增。面對形形色色的終端設(shè)備和千差萬別的屏幕分辨率，傳統(tǒng)的網(wǎng)頁設(shè)計方法顯得有些力不從心，而設(shè)計師不可能為每種終端設(shè)備專門設(shè)計一套網(wǎng)站系統(tǒng)。本文嘗試通過響應(yīng)式設(shè)計的開發(fā)方式，構(gòu)建一個使系統(tǒng)頁面隨接入設(shè)備的顯示大小不同而自行響應(yīng)、動態(tài)調(diào)整布局結(jié)構(gòu)、元素規(guī)格樣式，將相同的內(nèi)容以不同的格式呈現(xiàn)給

2、不同設(shè)備的用戶的系統(tǒng)。通過設(shè)計這樣的交互系統(tǒng)，可以達到利用同一套代碼，使網(wǎng)站內(nèi)容在PC、平板電腦以及智能手機瀏覽器上都能正常的顯示的目的。
　　本論文的工作，針對上海市松江大學(xué)城體育視頻網(wǎng)站的需求進行設(shè)計開發(fā)。論文首先對課題的研究背景和國內(nèi)外研究現(xiàn)狀做了較為深入的分析。在此基礎(chǔ)上，首先對課題研究中所用到的響應(yīng)式設(shè)計技術(shù)、以及與之相關(guān)的技術(shù)進行了介紹。然后對項目網(wǎng)站進行全面的需求分析，之后利用面向?qū)ο蟮乃枷牒图夹g(shù)進行了網(wǎng)站系統(tǒng)的概要

3、設(shè)計、詳細設(shè)計、系統(tǒng)實現(xiàn)和系統(tǒng)測試。系統(tǒng)完成的主要功能包括:
　　1)運用HTML5結(jié)合jQuery技術(shù)進行自定義視頻播放器;
　　2)運用MediaQuery技術(shù)實現(xiàn)不同終端上頁面的特定樣式;
　　3)每張頁面都采用彈性布局，使頁面元素可以隨頁面顯示大小變化而進行調(diào)整;
　　4)利用Viewport技術(shù)對網(wǎng)頁縮放進行控制;
　　5)完成系統(tǒng)管理，如視頻管理、學(xué)校管理、用戶管理。
　　通過該網(wǎng)站的建設(shè)