基于響應式web設計的質量工程論文范文
本站小編為你精心準備了基于響應式web設計的質量工程論文參考范文，愿這些范文能點燃您思維的火花，激發您的寫作靈感。歡迎深入閱讀并收藏。
質量工程管理系統是滁州職業技術學院教務處用于管理審批學院科研項目的一個web系統。本系統采用響應式web設計技術，基于B/S模式，在J2EE平臺上開發和實現。在項目開發之前，為了構建響應式web設計的開發框架，必須先確定系統整體的需求。由于質量工程管理系統的主要用戶是學院教師，因此，采用調查問卷的方式對學院教師進行了需求調查，以確定用戶使用移動設備的類型和所關心的具體的功能需求，便于規劃出幾種典型的響應式布局方式。經過對調查結果進行分析統計，系統用戶使用的移動設備類型及分辨率主要有PC機（1024×768或更高）、Android智能終端（480×800）、iPad（640×960）三種類型，使用這三種分辨率大小的用戶占了被調查用戶的絕大部分。同時，確定了質量工程管理系統的主要功能模塊。注冊用戶通過用戶名和密碼在登陸頁面登陸成功后，即可看到主頁面內容，主頁面導航欄由“公告欄”、“新申報項目”和“我的項目”三個欄目組成，其中“我的項目”包括“立項建設”、“材料上報記錄”、“申報記錄”和“已結項”四個子菜單項。
二、系統基于響應式web設計的實現
1采用彈性布局一個系統如果沒有一個良好的用戶體驗度，那么里面的內容就算設計的再好，也算不上是一個成功的系統。由于質量工程管理系統用戶使用的設備類型各異，訪問設備屏幕尺寸大小不一。如果采用傳統的兩欄或三欄固定寬度的布局方式，雖然符合PC機用戶的使用習慣，但必然不適合在移動終端設備上進行展示，使移動設備用戶缺乏體驗。因此，系統布局設計必須相對靈活，能夠針對不同分辨率的設備自適應調整。為了實現更靈活的布局設計，能在多種類型設備的顯示器中完美顯示，我們需要對頁面元素采用彈性布局。所謂彈性布局就是不使用固定寬度限制頁面元素的顯示范圍，這樣才能讓頁面元素根據所使用設備的顯示器分辨率大小靈活伸縮顯示。彈性布局是一切響應式布局的基礎，只有在彈性布局的基礎上使用其他web設計技術才能讓頁面在不同的訪問設備中很好的呈現。彈性布局要求包含元素的寬度單位全部采用百分比，同時設定包含元素的最大和最小寬度。根據前期分析和頁面彈性布局要求，在主頁面中，頁面頭部（Header）、底部（Footer）固定，占滿整個一行，因此寬度設定為100%，中間部分（Container）分成左側邊欄區和右側正文區兩部分，寬度分別設定為25%和75%。采用這種彈性布局方式，元素的寬度會自動隨著瀏覽器窗口寬度的改變而自動調整，不需要考慮瀏覽器窗口的具體寬度有多大。
2引入媒體查詢媒體查詢是響應式web設計的核心，它可以根據移動設備的分辨率大小自動調整相應的樣式。從CSS2開始，就可以在CSS中通過設置媒體類型獲得媒體支持。為了適應屏幕，大多數移動設備瀏覽器會把網頁縮放到設備屏幕的寬度，當縮小比例較大時，會導致瀏覽者看不清楚頁面的內容，瀏覽內容不方便。我們可以首先使用meta標簽的viewport屬性來設置，讓網頁寬度默認等于屏幕寬度。在質量工程管理系統頁面的<head>標簽中添加這個<meta>標簽的內容，代碼如下。上面的代碼是強制設置網頁在移動設備上的顯示寬度等于設備寬度，按照原始網頁縮放比例（initial-scale=1.0）1.0顯示網頁。這樣，支持viewport屬性的瀏覽器就會按照原始網頁的實際寬度去顯示網頁內容了。接下來，在上述設置了viewport屬性的基礎上，引入媒體查詢來設置網頁在不同的分辨率大小的設備上自動調用相應的CSS樣式進行顯示。媒體查詢被用來檢查對于所有寬度大于1024px分辨率的移動設備來說，系統頁面內容的寬度會被固定為980px。如果viewport小于980px，頁面布局會以彈性布局來顯示。如果viewport小于640px，頁面內容將會把左側邊欄區和右側正文區展開為整體寬度，形成一個單欄布局。頁面具體應用的媒體查詢代碼如下所示。
2導航欄設計由于移動設備屏幕大小的限制，質量工程管理系統在移動設備上顯示時，導航欄目會重疊顯示，使頁面看起來雜亂不堪。針對此問題，作者特意對導航欄重新設計，對于小屏幕的移動設備，利用js技術在最初時隱藏導航欄目，只為用戶提供一個按鈕，用戶點擊時，就會顯示完整導航欄。這樣做不僅使頁面看起來整潔美觀，節省了屏幕空間，用戶還可以按需索取想要了解的內容。在以后擴展系統功能增加更多導航條目時，也無需考慮屏幕尺寸問題所帶來的影響。
三、系統測試
在系統開發過程中，每一個階段都應該在多種瀏覽器和不同類型移動設備屏幕中進行測試，以便盡早發現和解決問題。質量工程管理系統在開發過程中，在多種移動設備上也經過不斷的測試和完善，最終效果如圖1所示。
四、結語
本文以實際項目為背景，講述了如何使用響應式web設計技術為移動設備訪問質量工程管理系統提供解決方案。相對于傳統web開發，響應式web設計技術可以給移動設備用戶提供更好的用戶體驗。也很大程度上避免了因訪問設備的分辨率不同而進行的重復開發，節省了人力物力，提高了開發效率。
作者：趙衛東單位：滁州職業技術學院