響應式布局應用技術研究

加爾肯?胡孜哈依爾

【摘要】基于響應式布局實現的網頁能夠根據瀏覽終端的不同以及同一終端分辨率的不同自適應顯示相應不同的網頁效果，消除瀏覽終端，包括PC機、智能手機及平板電腦等對網頁展示效果的影響，所以已經成為信息時代應用的主流。本文在研究時，主要從媒體查詢、有條件加載以及流式布局等技術角度分析響應式布局實現。

【關鍵詞】響應式；媒介查詢；流式布局；自適應

信息技術的快速發(fā)展及應用，導致越來越多的終端用戶不再拘泥于使用PC機瀏覽訪問網頁，而是逐漸往智能手機、平板電腦方向發(fā)展，由于這些終端屏幕大小不一、分辨率也各不相同，如果瀏覽網頁不能自適應，會給開發(fā)及維護帶來極大不便，而通過響應式布局，可以很好解決這一問題，所以針對響應式布局的研究擁有十分重要的現實意義。

1 響應式布局概述

響應式布局是指通過特定技術實現能夠兼容多個不同終端的網頁，而非單一終端設備的固定版本，實現網頁的自適應性，進而為網頁瀏覽用戶提供更舒適的界面瀏覽體驗。

2 關鍵技術

（1）媒介查詢技術

媒介查詢技術是基于CSS3規(guī)則實現，通過對智能終端設備的分析，讓CSS樣式更精確的作用于不同媒體資源或同一媒體資源的不同條件，豐富界面展示效果。

@media screen and（max-width：600px）{

body{

font-size：86%；

}

#content-main{

float：none；

width：100%；

}

}

（2）有條件加載技術

在移動終端設備訪問網頁時，為確保訪問效率及質量，只加載用戶瀏覽訪問部分的媒介資源，而暫停加載不必要的內容，包括社交工具、圖片等。

3響應式實現

（1）流式布局實現

流式布局在實現時，將網頁內容寬度全部由固定值定義轉化為百分比寬度值，并設置CSS浮動屬性，確保在終端瀏覽設備屏幕大小發(fā)生變化時，可以自浮動顯示網頁效果，避免了內容被隱藏。

（2）自適應文字及圖片

在終端設備屏幕大小發(fā)生變化時，網頁文字及圖片也同步縮放變更，為網頁效果展示提供支撐。其中，在文字處理時，使用相對大小單位em替代像素px，實現文字根據父級元素自適應；在圖片處理時，通過JS腳本檢測屏幕分辨率，并通過檢測結果發(fā)送虛擬請求，在服務器端處置返回圖片效果。

4.響應式WEB優(yōu)化

（1）代碼壓縮。使用Compass壓縮加載CSS資源，使用UglifyJs壓縮加載JS資源，減少HTTP請求次數，提升資源加載效率，降低用戶等待DOM加載時間。

（2）圖片及文本優(yōu)化。圖片及文本資源在顯示時，會占用大量kb，影響界面展示性能，通過Adaptive Images內嵌緩存及FitText修復方式實現圖片高效加載。

（3）頁面性能評估優(yōu)化。使用Mobitest工具對界面性能執(zhí)行評估分析，發(fā)現不足，彌補不足。

5 總結

智能終端的多樣化發(fā)展，給網站設計、維護帶來了極大的困難，而通過響應式布局的網站可以很好的解決這一問題，并為用戶提供更好的瀏覽服務，所以基于響應式布局的網站設計已經成為主流。

參考文獻：

[1]蔣凌燕，查英華.基于HTML5的響應式Web頁面重組適配技術研究[J].計算機與現代化.2015（02）.

[2]趙夢琪.淺談“扁平化設計”在交互設計中的應用[J].設計.2014（03）.

[3]王愉，潘明明.響應式網頁設計初探[J].北京印刷學院學報.2014（03）.

[4]戴慧萍.響應式設計對網頁界面的影響[J].藝術教育.2015（01）.