快速重構傳統網站爲(for)響應式網站的(of)方法研究-滄州星達網絡科技有限公司

去年8月3日，CNNIC發布了(Got it)第38次《中國(country)互聯網絡發展統計報告》。根據報告，截止到(arrive)2016年6月，我(I)國(country)網民規模達到(arrive)7.10億，手機上(superior)網人(people)數達到(arrive)6.56億。網民中使用(use)手機上(superior)網的(of)人(people)群占比達到(arrive)92.5%，比2015年底提升2.4%，僅通過手機上(superior)網的(of)網民占比達到(arrive)24.5%，網民上(superior)網設備進一(one)步向移動端集中。由此可見，手機等移動終端已經成爲(for)訪問網站的(of)主要(want)工具。

然而，現在(exist)很多的(of)網站仍然是(yes)基于(At)PC端開發的(of)傳統網站，或者采用(use)PC站點+移動站點的(of)方式，這(this)樣或造成用(use)戶體驗差，或造成開發成本和(and)維護成本高，都不(No)是(yes)好的(of)方法。

2幾種主要(want)類型網站分析

2.1傳統PC網站

基于(At)PC端開發的(of)普通網站可以(by)展示詳盡的(of)信息，頁面大(big)、内容豐富，可以(by)包含各種動畫、視頻、圖片等多媒體元素。由于(At)采用(use)電腦顯示器進行網頁浏覽，網頁布局一(one)般采用(use)較寬的(of)尺寸和(and)較小的(of)字體，以(by)保證盡可能多的(of)展示信息。網絡環境一(one)般是(yes)有線或WLAN，上(superior)網速度相對快，網站開發不(No)必過多考慮容量問題。PC端的(of)網站更專注于(At)網頁内容的(of)詳盡和(and)渲染風格的(of)多樣。

2.2手機網站

手機網站主要(want)是(yes)在(exist)各種移動終端設備上(superior)浏覽。由于(At)各種終端設備本身的(of)差異、設備使用(use)環境的(of)差異和(and)上(superior)網速度的(of)差異，使得手機網站的(of)内容必須簡要(want)，形式相對單一(one)，必須能适配各種不(No)同分辨率的(of)終端設備，盡可能的(of)考慮用(use)戶體驗。

基于(At)移動端開發的(of)網站在(exist)浏覽器設備和(and)上(superior)網環境上(superior)受到(arrive)了(Got it)很大(big)的(of)局限，開發過程中更多的(of)要(want)考慮網站内容的(of)簡約和(and)用(use)戶浏覽的(of)體驗。目前用(use)的(of)較多的(of)微網站就是(yes)手機網站的(of)一(one)種形式。它是(yes)基于(At)微信入口的(of)手機網站，除具有手機網站的(of)一(one)般特點外，企業和(and)個(indivual)人(people)還能借助微信用(use)戶，更準确的(of)宣傳自己。微網站更加注重用(use)戶的(of)浏覽體驗和(and)交互性能，具有便捷性，隐私性，互動性，傳播力，關注力，成交率，轉化率，曝光率等特點。

2.3響應式網站

響應式網站即自适應網站，是(yes)由Ethan Marcotte在(exist)2010年5月提出(out)的(of)。簡單的(of)說，就是(yes)“一(one)站開發，随處可用(use)”，能兼容各種終端，不(No)用(use)考慮爲(for)不(No)同的(of)屏幕設備定做版本。近年來(Come)，各種大(big)屏幕移動設備的(of)普及，響應式網站也受到(arrive)了(Got it)更多人(people)的(of)青睐。乃至很多人(people)認爲(for)，響應式網站是(yes)實現友好移動目标的(of)佳方案。響應式網站做到(arrive)了(Got it)“三站合一(one)”，在(exist)網站開發和(and)維護上(superior)大(big)大(big)降低成本，同時(hour)全方位宣傳自己。

快速重構傳統網站爲(for)響應式網站的(of)方法研究

3關鍵技術分析

3.1媒介查詢

媒介查詢（MediaQuery）是(yes)CSS3的(of)新增功能，允許根據訪問設備的(of)條件定制樣式表規則。具體來(Come)說，就是(yes)可以(by)根據訪問端的(of)介質情況和(and)屏幕分辨率，調用(use)不(No)同的(of)樣式來(Come)渲染頁面效果。通過響應式設計，可以(by)實現跨平台和(and)跨設備的(of)兼容。可以(by)通過兩種不(No)同的(of)方式使用(use)媒體查詢：

3.1.1在(exist)頁面頭部鏈接外部CSS

在(exist)<head>中使用(use)<link>标簽時(hour)，通過設置media屬性，實現對設備的(of)判斷，從而加載不(No)同的(of)CSS文件，例如：<linkrel="stylesheet"href="middle.css"media="screen and(min-width:400px)">這(this)句代碼表示在(exist)滿足media的(of)判斷語句screen and(min-width:400px)時(hour)調用(use)middle.css文件，即在(exist)寬度大(big)于(At)等于(At)400像素的(of)屏幕設備上(superior)面使用(use)該樣式表。

3.1.2在(exist)CSS中爲(for)不(No)同設備定制樣式

@media screen and(min-width:600px){/*CSSCode*/}

@media screen and(max-width:599px){/*CSSCode*/}

上(superior)面兩行代碼中，第一(one)行代碼表示在(exist)滿足小寬度爲(for)600像素的(of)屏幕設備中調用(use)樣式，第二行代碼表示在(exist)大(big)寬度爲(for)599像素的(of)屏幕設備中執行的(of)樣式。寫在(exist)@media語句段外的(of)是(yes)公用(use)代碼。如果出(out)現樣式沖突，會按照原本的(of)CSS規則調用(use)樣式。通過CSS中的(of)媒介查詢功能，可以(by)爲(for)不(No)同的(of)設備類型定義不(No)同的(of)CSS樣式，在(exist)通過浏覽網頁時(hour)，自動查詢媒體類型并調用(use)對應的(of)樣式，以(by)實現對不(No)同設備的(of)适配。

3.2彈性盒布局

CSS3引入了(Got it)一(one)種新的(of)排版布局方式—彈性盒布局模型（Flexible Box Layout）。使用(use)該布局方式，可以(by)更加高效的(of)對容器中的(of)元素進行布局、對齊和(and)進行空間的(of)分配。這(this)種方式在(exist)不(No)清楚容器尺寸或動态時(hour)也能執行。彈性盒布局原理如圖1所示。在(exist)彈性盒布局中，一(one)個(indivual)元素上(superior)有主軸和(and)縱軸，主軸默認是(yes)橫向的(of)，縱軸是(yes)豎向的(of)。其中，所有子元素的(of)排版都會受這(this)兩個(indivual)軸的(of)影響。通過改變主軸和(and)縱軸的(of)方向，可以(by)設置很多相關CSS屬性，從而實現不(No)同的(of)設計效果。

3.3圖片液态化

在(exist)響應式布局中，圖片需要(want)适配不(No)同寬度的(of)屏幕，以(by)給出(out)佳顯示方案，如水一(one)樣會跟着寬度的(of)變化而變化。一(one)個(indivual)網頁中的(of)圖片分爲(for)内容圖片和(and)背景圖片，可以(by)分别對其進行“液态化”設置。

3.3.1内容圖片

對内容圖片，可以(by)使用(use)max-width屬性設置其大(big)寬度值，以(by)保證圖片的(of)大(big)小不(No)會超出(out)它所在(exist)的(of)父容器大(big)小。例如：img{max-width:100%;height:auto;}

這(this)樣調整後，圖片的(of)寬度不(No)會超出(out)其父元素的(of)有效寬度。當其父元素變窄時(hour)，圖片的(of)大(big)寬度值也相應減小，當其父元素變寬時(hour)，圖片的(of)大(big)寬度值也随之增加。圖片不(No)會因爲(for)其容器的(of)大(big)小而被隐藏和(and)遮蓋。通過設置height屬性的(of)值爲(for)auto，保證了(Got it)在(exist)圖片寬度變化時(hour)，整張圖片是(yes)等比例縮放的(of)。

3.3.2背景圖片

在(exist)CSS3中新增了(Got it)對背景圖進行大(big)小控制的(of)屬性：background-size。background-size屬性包含兩個(indivual)屬性值，分别表示背景圖的(of)寬度和(and)高度。要(want)實現背景圖的(of)“液态化”隻需将寬度值設爲(for)100%，高度值設爲(for)auto，例如：

.bg{background:url(images/bg.jpg) norepeat;background-size:100% auto;}

4具體實現

将傳統網站重構爲(for)響應式網站時(hour)，要(want)保證原有網站在(exist)PC端浏覽的(of)效果不(No)變，同時(hour)要(want)适配不(No)同的(of)移動設備。這(this)就要(want)求對原有網站進行分析，不(No)破壞原有網站的(of)HTML結構，隻是(yes)通過新建CSS來(Come)滿足移動設備的(of)浏覽。此處以(by)一(one)個(indivual)傳統的(of)個(indivual)人(people)博客網頁爲(for)例，詳細說明重構的(of)方法和(and)過程。已有的(of)個(indivual)人(people)博客網頁在(exist)PC上(superior)浏覽的(of)效果如圖2所示。

4.1分析網站、取舍内容

由于(At)移動設備屏幕寬度及上(superior)網環境的(of)限制，不(No)可能将傳統網站中的(of)内容全部顯示。在(exist)取舍内容時(hour)可以(by)保留網站中重要(want)的(of)部分，對可有可無的(of)内容要(want)舍棄，對比較耗流量的(of)背景圖要(want)舍棄。手機網站中的(of)每個(indivual)頁面都是(yes)應該呈現給用(use)戶的(of)内容，頁面簡潔，無需過多的(of)背景修飾。在(exist)個(indivual)人(people)博客網頁中将右側邊欄的(of)内容在(exist)手機端顯示時(hour)全部隐藏，如圖3所示。

4.2編寫響應式網站樣式表

在(exist)對内容進行取舍後，再針對移動設備編寫響應的(of)樣式表文件。在(exist)樣式表文件中要(want)對不(No)顯示的(of)内容的(of)進行隐藏，對剩下内容的(of)顯示實現自适應。

4.2.1隐藏不(No)顯示的(of)内容

對不(No)顯示的(of)内容可以(by)通過設置display屬性值爲(for)“none”實現。在(exist)個(indivual)人(people)博客頁面中右側邊欄内容放在(exist)一(one)個(indivual)調用(use)了(Got it)類“main_slide”的(of)div裏，設置如下：

.main_slide{display:none;}

對不(No)需要(want)的(of)背景圖，可以(by)通過設置background屬性值爲(for)“none”實現。

4.2.2自适應設置

在(exist)設置自适應時(hour)，要(want)考慮容器大(big)小、圖片大(big)小和(and)文字大(big)小的(of)自适應，還要(want)考慮排版布局的(of)自适應。首先将各容器大(big)小和(and)圖片大(big)小設置爲(for)百分比。個(indivual)人(people)博客頁面中的(of)container容器和(and)header容器均爲(for)全屏顯示，可以(by)設置爲(for)：

.container{width:100%;}.header{width:100%;}

對于(At)排在(exist)一(one)行的(of)不(No)同容器，要(want)适當分配比例，例如：

.left{width:30%;}.right{width:70%;}

對于(At)圖片可以(by)設置其寬度值爲(for)百分比，高度值爲(for)自動，這(this)樣可以(by)實現圖片的(of)等比例縮放。例如:img{max-width:80%;height:auto;}，這(this)樣設置後圖片的(of)寬度爲(for)其父容器的(of)80%，高度根據圖片寬度的(of)變化，等比例縮放。字體大(big)小的(of)自适應實現，可以(by)通過CSS3中的(of)rem來(Come)設置。rem指根元素字體大(big)小，一(one)般爲(for)16px,在(exist)設置頁面中元素字體大(big)小時(hour)隻需根據16px的(of)比例來(Come)設置就可以(by)了(Got it)，比如：.fnt{font-size:87.5%;}即設置14px大(big)小的(of)字體（14/16=0.875）。

4.3爲(for)頁面應用(use)樣式

通過CSS3的(of)媒體查詢設置，可以(by)根據具體設備情況，爲(for)網頁加載不(No)同的(of)CSS樣式表，以(by)實現在(exist)不(No)同設備上(superior)的(of)相同浏覽體驗。在(exist)個(indivual)人(people)博客網頁中具體設置方法如下：

在(exist)所有設備上(superior)頁面都會加載一(one)個(indivual)基本樣式表文件(basic.css)，各種設備中顯示是(yes)一(one)樣。當屏幕小寬度爲(for)800px時(hour)，加載pc.css樣式表文件，用(use)于(At)呈現PC端的(of)渲染風格。當屏幕寬度小于(At)799px時(hour)，加載mobile.css文件，用(use)于(At)呈現移動端的(of)渲染風格。

5測試

在(exist)PC端使用(use)IE浏覽器、谷歌浏覽器和(and)火狐浏覽器打開網頁，并改變窗口大(big)小，網頁中的(of)圖片、文字、背景及其他(he)網頁元素均能正常顯示，并能保持良好的(of)布局。在(exist)平闆電腦和(and)手機上(superior)打開網頁，網頁中各元素均能正常顯示，并保持良好布局。測試結果表明，重構後的(of)頁面，具有很好的(of)适配性。

6結語

随着手機用(use)戶的(of)不(No)斷增加和(and)使用(use)習慣的(of)轉變，響應式網站的(of)開發顯得越來(Come)越重要(want)，也受到(arrive)了(Got it)開發者和(and)客戶的(of)青睐。幫助傳統網站在(exist)幾乎不(No)增加成本的(of)前提下快速建立起自己的(of)響應式網站，具有實際意義。

分享建站技術、優化技巧、營銷資訊

 公司動态

快速重構傳統網站爲(for)響應式網站的(of)方法研究