響應式設計技術在視頻網站開發(fā)中的應用.pdf

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

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

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