快速重構(gòu)傳統(tǒng)網(wǎng)站為響應(yīng)式網(wǎng)站發(fā)布者：本站     時(shí)間：2020-02-11 10:02:31

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