隨著手機用戶的快速增長, 建立起自己的響應式網(wǎng)站成了很多企業(yè)和個人的需求。然而對于一個已有的傳統(tǒng)網(wǎng)站, 如果完全拋棄原有網(wǎng)站, 重新建立一個新的響應式網(wǎng)站, 將造成成本的增加和資源的浪費。如果將傳統(tǒng)網(wǎng)站快速重構為響應式網(wǎng)站的方法, 在不改動原有網(wǎng)站的基礎上, 增加很少的工作量, 就可以實現(xiàn)網(wǎng)站在移動設備上的完全適配。
一、幾種主要類型網(wǎng)站分析
1、傳統(tǒng)PC網(wǎng)站
基于PC端開發(fā)的普通網(wǎng)站可以展示詳盡的信息, 頁面大、內容豐富, 可以包含各種動畫、視頻、圖片等多媒體元素。由于采用電腦顯示器進行網(wǎng)頁瀏覽, 網(wǎng)頁布局一般采用較寬的尺寸和較小的字體, 以保證盡可能多的展示信息。網(wǎng)絡環(huán)境一般是有線或WLAN, 上網(wǎng)速度相對快, 網(wǎng)站開發(fā)不必過多考慮容量問題。PC端的網(wǎng)站更專注于網(wǎng)頁內容的詳盡和渲染風格的多樣。
2、手機網(wǎng)站
手機網(wǎng)站主要是在各種移動終端設備上瀏覽。由于各種終端設備本身的差異、設備使用環(huán)境的差異和上網(wǎng)速度的差異, 使得手機網(wǎng)站的內容必須簡要, 形式相對單一, 必須能適配各種不同分辨率的終端設備, 盡可能的考慮用戶體驗。
基于移動端開發(fā)的網(wǎng)站在瀏覽器設備和上網(wǎng)環(huán)境上受到了很大的局限, 開發(fā)過程中更多的要考慮網(wǎng)站內容的簡約和用戶瀏覽的體驗。
目前用的較多的微網(wǎng)站就是手機網(wǎng)站的一種形式。它是基于微信入口的手機網(wǎng)站, 除具有手機網(wǎng)站的一般特點外, 企業(yè)和個人還能借助微信用戶, 更準確的宣傳自己。微網(wǎng)站更加注重用戶的瀏覽體驗和交互性能, 具有便捷性, 隱私性, 互動性, 傳播力, 關注力, 成交率, 轉化率, 曝光率等特點。
3、響應式網(wǎng)站
響應式網(wǎng)站簡單說來, 就是“一站開發(fā), 隨處可用”, 能兼容各種終端, 不用考慮為不同的屏幕設備定做版本。近年來, 各種大屏幕移動設備的普及, 響應式網(wǎng)站也受到了更多人的青睞。乃至很多人認為, 響應式網(wǎng)站是實現(xiàn)友好移動目標的最佳方案。
響應式網(wǎng)站做到了“三站合一”, 在網(wǎng)站開發(fā)和維護上大大降低成本, 同時全方位宣傳自己。
二、關鍵技術分析
1、媒介查詢
媒介查詢具體來說, 就是可以根據(jù)訪問端的介質情況和屏幕分辨率, 調用不同的樣式來渲染頁面效果。通過響應式設計, 可以實現(xiàn)跨平臺和跨設備的兼容。
通過CSS中的媒介查詢功能, 可以為不同的設備類型定義不同的CSS樣式, 在通過瀏覽網(wǎng)頁時, 自動查詢媒體類型并調用對應的樣式, 以實現(xiàn)對不同設備的適配。
2、彈性盒布局
CSS3引入了一種新的排版布局方式—彈性盒布局模型。使用該布局方式, 可以更加高效的對容器中的元素進行布局、對齊和進行空間的分配。這種方式在不清楚容器尺寸或動態(tài)時也能執(zhí)行。
3、圖片液態(tài)化
在響應式布局中, 圖片需要適配不同寬度的屏幕, 以給出最佳顯示方案, 如水一樣會跟著寬度的變化而變化。一個網(wǎng)頁中的圖片分為內容圖片和背景圖片, 可以分別對其進行“液態(tài)化”設置。
4、具體實現(xiàn)
將傳統(tǒng)網(wǎng)站重構為響應式網(wǎng)站時, 要保證原有網(wǎng)站在PC端瀏覽的效果不變, 同時要適配不同的移動設備。這就要求對原有網(wǎng)站進行分析, 不破壞原有網(wǎng)站的HTML結構, 只是通過新建CSS來滿足移動設備的瀏覽。
①、分析網(wǎng)站、取舍內容
由于移動設備屏幕寬度及上網(wǎng)環(huán)境的限制, 不可能將傳統(tǒng)網(wǎng)站中的內容全部顯示。在取舍內容時可以保留網(wǎng)站中最重要的部分, 對可有可無的內容要舍棄, 對比較耗流量的背景圖要舍棄。手機網(wǎng)站中的每個頁面都是最應該呈現(xiàn)給用戶的內容, 頁面簡潔, 無需過多的背景修飾。
②、編寫響應式網(wǎng)站樣式表
在對內容進行取舍后, 再針對移動設備編寫響應的樣式表文件。在樣式表文件中要對不顯示的內容的進行隱藏, 對剩下內容的顯示實現(xiàn)自適應。
③、為頁面應用樣式
通過CSS3的媒體查詢設置, 可以根據(jù)具體設備情況, 為網(wǎng)頁加載不同的CSS樣式表, 以實現(xiàn)在不同設備上的相同瀏覽體驗。
5、測試
在PC端使用IE瀏覽器、谷歌瀏覽器和火狐瀏覽器打開網(wǎng)頁, 并改變窗口大小, 網(wǎng)頁中的圖片、文字、背景及其他網(wǎng)頁元素均能正常顯示, 并能保持良好的布局。在平板電腦和手機上打開網(wǎng)頁, 網(wǎng)頁中各元素均能正常顯示, 并保持良好布局。測試結果表明, 重構后的頁面, 具有很好的適配性。