響應(yīng)式布局應(yīng)用技術(shù)研究

加爾肯?胡孜哈依爾

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

【關(guān)鍵詞】響應(yīng)式；媒介查詢；流式布局；自適應(yīng)

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

1 響應(yīng)式布局概述

響應(yīng)式布局是指通過特定技術(shù)實(shí)現(xiàn)能夠兼容多個不同終端的網(wǎng)頁，而非單一終端設(shè)備的固定版本，實(shí)現(xiàn)網(wǎng)頁的自適應(yīng)性，進(jìn)而為網(wǎng)頁瀏覽用戶提供更舒適的界面瀏覽體驗(yàn)。

2 關(guān)鍵技術(shù)

（1）媒介查詢技術(shù)

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

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

body{

font-size：86%；

}

#content-main{

float：none；

width：100%；

}

}

（2）有條件加載技術(shù)

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

3響應(yīng)式實(shí)現(xiàn)

（1）流式布局實(shí)現(xiàn)

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

（2）自適應(yīng)文字及圖片

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

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

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

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

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

5 總結(jié)

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

參考文獻(xiàn)：

[1]蔣凌燕，查英華.基于HTML5的響應(yīng)式Web頁面重組適配技術(shù)研究[J].計(jì)算機(jī)與現(xiàn)代化.2015（02）.

[2]趙夢琪.淺談“扁平化設(shè)計(jì)”在交互設(shè)計(jì)中的應(yīng)用[J].設(shè)計(jì).2014（03）.

[3]王愉，潘明明.響應(yīng)式網(wǎng)頁設(shè)計(jì)初探[J].北京印刷學(xué)院學(xué)報(bào).2014（03）.

[4]戴慧萍.響應(yīng)式設(shè)計(jì)對網(wǎng)頁界面的影響[J].藝術(shù)教育.2015（01）.