行業動态

随着手機用戶的(de)快速增長, 建立起自己的(de)響應式網站成了(le／liǎo)很多企業和(hé / huò)個(gè)人(rén)的(de)需求。然而(ér)對于(yú)一(yī / yì ／yí)個(gè)已有的(de)傳統網站, 如果完全抛棄原有網站, 重新建立一(yī / yì ／yí)個(gè)新的(de)響應式網站, 将造成成本的(de)增加和(hé / huò)資源的(de)浪費。如果将傳統網站快速重構爲(wéi / wèi)響應式網站的(de)方法, 在(zài)不(bù)改動原有網站的(de)基礎上(shàng), 增加很少的(de)工作量, 就(jiù)可以(yǐ)實現網站在(zài)移動設備上(shàng)的(de)完全适配。

一(yī / yì ／yí)、幾種主要(yào / yāo)類型網站分析

1、傳統PC網站

基于(yú)PC端開發的(de)普通網站可以(yǐ)展示詳盡的(de)信息, 頁面大(dà)、内容豐富, 可以(yǐ)包含各種動畫、視頻、圖片等多媒體元素。由于(yú)采用電腦顯示器進行網頁浏覽, 網頁布局一(yī / yì ／yí)般采用較寬的(de)尺寸和(hé / huò)較小的(de)字體, 以(yǐ)保證盡可能多的(de)展示信息。網絡環境一(yī / yì ／yí)般是(shì)有線或WLAN, 上(shàng)網速度相對快, 網站開發不(bù)必過多考慮容量問題。PC端的(de)網站更專注于(yú)網頁内容的(de)詳盡和(hé / huò)渲染風格的(de)多樣。

2、手機網站

手機網站主要(yào / yāo)是(shì)在(zài)各種移動終端設備上(shàng)浏覽。由于(yú)各種終端設備本身的(de)差異、設備使用環境的(de)差異和(hé / huò)上(shàng)網速度的(de)差異, 使得手機網站的(de)内容必須簡要(yào / yāo), 形式相對單一(yī / yì ／yí), 必須能适配各種不(bù)同分辨率的(de)終端設備, 盡可能的(de)考慮用戶體驗。

基于(yú)移動端開發的(de)網站在(zài)浏覽器設備和(hé / huò)上(shàng)網環境上(shàng)受到(dào)了(le／liǎo)很大(dà)的(de)局限, 開發過程中更多的(de)要(yào / yāo)考慮網站内容的(de)簡約和(hé / huò)用戶浏覽的(de)體驗。

目前用的(de)較多的(de)微網站就(jiù)是(shì)手機網站的(de)一(yī / yì ／yí)種形式。它是(shì)基于(yú)微信入口的(de)手機網站, 除具有手機網站的(de)一(yī / yì ／yí)般特點外, 企業和(hé / huò)個(gè)人(rén)還能借助微信用戶, 更準确的(de)宣傳自己。微網站更加注重用戶的(de)浏覽體驗和(hé / huò)交互性能, 具有便捷性, 隐私性, 互動性, 傳播力, 關注力, 成交率, 轉化率, 曝光率等特點。

3、響應式網站

響應式網站簡單說(shuō)來(lái), 就(jiù)是(shì)“一(yī / yì ／yí)站開發, 随處可用”, 能兼容各種終端, 不(bù)用考慮爲(wéi / wèi)不(bù)同的(de)屏幕設備定做版本。近年來(lái), 各種大(dà)屏幕移動設備的(de)普及, 響應式網站也(yě)受到(dào)了(le／liǎo)更多人(rén)的(de)青睐。乃至很多人(rén)認爲(wéi / wèi), 響應式網站是(shì)實現友好移動目标的(de)最佳方案。

響應式網站做到(dào)了(le／liǎo)“三站合一(yī / yì ／yí)”, 在(zài)網站開發和(hé / huò)維護上(shàng)大(dà)大(dà)降低成本, 同時(shí)全方位宣傳自己。

二、關鍵技術分析

1、媒介查詢

媒介查詢具體來(lái)說(shuō), 就(jiù)是(shì)可以(yǐ)根據訪問端的(de)介質情況和(hé / huò)屏幕分辨率, 調用不(bù)同的(de)樣式來(lái)渲染頁面效果。通過響應式設計, 可以(yǐ)實現跨平台和(hé / huò)跨設備的(de)兼容。

通過CSS中的(de)媒介查詢功能, 可以(yǐ)爲(wéi / wèi)不(bù)同的(de)設備類型定義不(bù)同的(de)CSS樣式, 在(zài)通過浏覽網頁時(shí), 自動查詢媒體類型并調用對應的(de)樣式, 以(yǐ)實現對不(bù)同設備的(de)适配。

2、彈性盒布局

CSS3引入了(le／liǎo)一(yī / yì ／yí)種新的(de)排版布局方式—彈性盒布局模型。使用該布局方式, 可以(yǐ)更加高效的(de)對容器中的(de)元素進行布局、對齊和(hé / huò)進行空間的(de)分配。這(zhè)種方式在(zài)不(bù)清楚容器尺寸或動态時(shí)也(yě)能執行。

3、圖片液态化

在(zài)響應式布局中, 圖片需要(yào / yāo)适配不(bù)同寬度的(de)屏幕, 以(yǐ)給出(chū)最佳顯示方案, 如水一(yī / yì ／yí)樣會跟着寬度的(de)變化而(ér)變化。一(yī / yì ／yí)個(gè)網頁中的(de)圖片分爲(wéi / wèi)内容圖片和(hé / huò)背景圖片, 可以(yǐ)分别對其進行“液态化”設置。

4、具體實現

将傳統網站重構爲(wéi / wèi)響應式網站時(shí), 要(yào / yāo)保證原有網站在(zài)PC端浏覽的(de)效果不(bù)變, 同時(shí)要(yào / yāo)适配不(bù)同的(de)移動設備。這(zhè)就(jiù)要(yào / yāo)求對原有網站進行分析, 不(bù)破壞原有網站的(de)HTML結構, 隻是(shì)通過新建CSS來(lái)滿足移動設備的(de)浏覽。

①、分析網站、取舍内容

由于(yú)移動設備屏幕寬度及上(shàng)網環境的(de)限制, 不(bù)可能将傳統網站中的(de)内容全部顯示。在(zài)取舍内容時(shí)可以(yǐ)保留網站中最重要(yào / yāo)的(de)部分, 對可有可無的(de)内容要(yào / yāo)舍棄, 對比較耗流量的(de)背景圖要(yào / yāo)舍棄。手機網站中的(de)每個(gè)頁面都是(shì)最應該呈現給用戶的(de)内容, 頁面簡潔, 無需過多的(de)背景修飾。

②、編寫響應式網站樣式表

在(zài)對内容進行取舍後, 再針對移動設備編寫響應的(de)樣式表文件。在(zài)樣式表文件中要(yào / yāo)對不(bù)顯示的(de)内容的(de)進行隐藏, 對剩下内容的(de)顯示實現自适應。

③、爲(wéi / wèi)頁面應用樣式

通過CSS3的(de)媒體查詢設置, 可以(yǐ)根據具體設備情況, 爲(wéi / wèi)網頁加載不(bù)同的(de)CSS樣式表, 以(yǐ)實現在(zài)不(bù)同設備上(shàng)的(de)相同浏覽體驗。

5、測試

在(zài)PC端使用IE浏覽器、谷歌浏覽器和(hé / huò)火狐浏覽器打開網頁, 并改變窗口大(dà)小, 網頁中的(de)圖片、文字、背景及其他(tā)網頁元素均能正常顯示, 并能保持良好的(de)布局。在(zài)平闆電腦和(hé / huò)手機上(shàng)打開網頁, 網頁中各元素均能正常顯示, 并保持良好布局。測試結果表明, 重構後的(de)頁面, 具有很好的(de)适配性。