響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)在移動(dòng)互聯(lián)網(wǎng)中的應(yīng)用

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)在移動(dòng)互聯(lián)網(wǎng)中的應(yīng)用游琪摘 要：快速發(fā)展的互聯(lián)網(wǎng)已經(jīng)日益成為現(xiàn)代人生活的重要組成部分，隨著智能手機(jī)和平板電腦的普及率越來(lái)越高，也意味著有愈來(lái)愈多的用戶會(huì)通過(guò)移動(dòng)設(shè)備訪問(wèn)互聯(lián)網(wǎng)，這些用戶需要看到的網(wǎng)頁(yè)信息及圖片大小能夠自動(dòng)進(jìn)行切換，根據(jù)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)自身的特點(diǎn)能滿足此要求。

關(guān)鍵詞：響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)；移動(dòng)互聯(lián)網(wǎng)；智能手機(jī)；平板電腦

中圖分類(lèi)號(hào)：TP393.092

隨著通信設(shè)備性能及無(wú)線網(wǎng)絡(luò)通信速度的提升，以智能手機(jī)和平板電腦為代表的移動(dòng)智能終端數(shù)量增長(zhǎng)迅速。據(jù)工信部統(tǒng)計(jì)，截止2014年1月，中國(guó)的移動(dòng)互聯(lián)網(wǎng)用戶達(dá)到了8.38億。這些互聯(lián)網(wǎng)用戶通過(guò)Internet獲取信息，主要基于網(wǎng)頁(yè)瀏覽器，由于傳統(tǒng)的網(wǎng)頁(yè)設(shè)計(jì)很大程度上是基于臺(tái)式電腦而設(shè)計(jì)的，其網(wǎng)頁(yè)標(biāo)簽存在固定的寬度和高度，靈活性較低，當(dāng)用低分辨率的智能設(shè)備瀏覽網(wǎng)頁(yè)時(shí)，用戶需要不斷拖動(dòng)才能看到網(wǎng)頁(yè)呈現(xiàn)的全部信息，影響用戶體驗(yàn)。而響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)能集中創(chuàng)建頁(yè)面的圖片排版大小，可以智能地根據(jù)用戶行為以及使用的設(shè)備環(huán)境進(jìn)行相對(duì)應(yīng)的布局。

1 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)

1.1 概述

響應(yīng)式布局是Ethan Marcotte在2010年5月份提出的一個(gè)概念，實(shí)際就是一個(gè)網(wǎng)站能夠兼容多個(gè)終端，而不是為每個(gè)終端做一個(gè)特定的版本。這個(gè)概念是為解決移動(dòng)互聯(lián)網(wǎng)瀏覽而誕生的。

響應(yīng)式布局可以為不同終端的用戶提供更加舒適的界面和更好的用戶體驗(yàn)，而且隨著目前大屏幕移動(dòng)設(shè)備的普及，用大勢(shì)所趨來(lái)形容也不為過(guò)。隨著越來(lái)越多的設(shè)計(jì)師采用這個(gè)技術(shù)，我們不僅看到很多的創(chuàng)新，還看到了一些成形的模式。

1.2 設(shè)計(jì)思想

（1）彈性化

通過(guò)響應(yīng)式的設(shè)計(jì)和開(kāi)發(fā)思路讓頁(yè)面更加“彈性”了。圖片的尺寸可以被自動(dòng)調(diào)整，頁(yè)面液態(tài)圖片技術(shù)布局再不會(huì)被破壞。雖然永遠(yuǎn)沒(méi)有最完美的解決方案，但它給了更多選擇。無(wú)論用戶切換設(shè)備的屏幕定向方式，還是從臺(tái)式機(jī)屏幕轉(zhuǎn)到iPad上瀏覽，頁(yè)面都會(huì)真正的富有彈性。

（2）媒介查詢

通過(guò)不同的媒介類(lèi)型和條件定義樣式表規(guī)則。媒介查詢讓CSS可以更精確作用于不同的媒介類(lèi)型和同一媒介的不同條件。媒介查詢的大部分媒介特性都接受min和max用于表達(dá)“大于或等于”和“小于或等于”。如：width會(huì)有min-width和max-width媒介查詢可以被用在CSS中的@media和@import規(guī)則上，也可以被用在HTML和XML中。通過(guò)這個(gè)標(biāo)簽屬性，可以很方便的在不同的設(shè)備下實(shí)現(xiàn)豐富的界面，特別是移動(dòng)設(shè)備，將會(huì)運(yùn)用更加的廣泛。

（3）流式布局

流式布局，就是布局會(huì)自動(dòng)擴(kuò)展和適應(yīng)瀏覽器窗口的寬度，是相對(duì)于目前廣泛采用的固定布局來(lái)說(shuō)的。由于最外層的容器寬度是固定不變的，所以不論訪問(wèn)者的瀏覽器分辨率是多少，他們所看到的網(wǎng)頁(yè)寬度都是一樣的。而流式布局則不同，主要使用百分比來(lái)設(shè)置各個(gè)部分的寬度，結(jié)合CSS中的元素浮動(dòng)屬性，可以讓網(wǎng)頁(yè)中的元素根據(jù)頁(yè)面寬度變化自動(dòng)調(diào)整自身寬度及位置，以適應(yīng)不同的屏幕分辨率。

此外，在使用流式布局時(shí)頁(yè)面中的字體尺寸也應(yīng)使用相對(duì)尺寸，這樣能夠使網(wǎng)頁(yè)能更好地適應(yīng)各種屏幕。

2 在移動(dòng)互聯(lián)網(wǎng)中的應(yīng)用

在使用響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)時(shí)，應(yīng)該遵循移動(dòng)優(yōu)先原則，以移動(dòng)端為主，PC則作為移動(dòng)端的一個(gè)擴(kuò)展。具體的實(shí)現(xiàn)可以分為以下幾步進(jìn)行。

（1）設(shè)置meta標(biāo)簽

因?yàn)楝F(xiàn)在主流的智能終端都是基于IOS和Android的，而它們自帶的瀏覽器都是基于webkit內(nèi)核，因此，可以完全使用viewport屬性技術(shù)來(lái)控制手機(jī)瀏覽器布局：其中，initial-scale，初始的縮放比例；maximum-scale，允許用戶縮放到最大比例；maximun-scale=1.0，不能進(jìn)行縮放；

user-scalable=no，用戶是否可以調(diào)整縮放比例。

（2）HTML結(jié)構(gòu)

根據(jù)移動(dòng)設(shè)備的類(lèi)型設(shè)置頭部、主體內(nèi)容、側(cè)邊欄及頁(yè)腳的頁(yè)面布局。

（3）媒介查詢和流式布局

CSS3 Media Query是響應(yīng)式設(shè)計(jì)的核心。它根據(jù)條件告訴瀏覽器如何為指定視圖寬度渲染頁(yè)面，使用media query技術(shù)可以實(shí)現(xiàn)網(wǎng)站的響應(yīng)性。如下面的視圖寬度小于等于800像素時(shí)，則能產(chǎn)生自適應(yīng)效果。

/*800px顯屏*/

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

#pagewrap{width：95%；}

#content{width：70%；}

#sidebar{width：30%；}}

按照上面的規(guī)則，以下不同的移動(dòng)設(shè)備均能產(chǎn)生自適應(yīng)效果。

/*iPad橫版顯屏*/

@media screen and （max-device-width： 800px） and （orientation：landscape）{

#content{width：auto；float：none；}

#sidebar{width：suto；float：none；}}

/*iPad豎版顯屏*/

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

#content {width：auto；float：none；}

#sidebar{width：suto；float：none；}}

/*iPhone和Smartphones*/

@media screen and（min-device-width：320px）and（min-device-width：480px）{

#pagewrap{width：96%；}

#content{width：75%；}

#sidebar{width：25%；}}

3 結(jié)束語(yǔ)

為了使各種尺寸的屏幕及移動(dòng)終端可以訪問(wèn)到更多站點(diǎn)，響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)將會(huì)被越來(lái)越多的移動(dòng)終端推向主流。而各種Web的響應(yīng)式設(shè)計(jì)也獲得了越來(lái)越多的注意，“讓人們忘記設(shè)備尺寸”的理念將更快地驅(qū)動(dòng)響應(yīng)式設(shè)計(jì)，所以Web設(shè)計(jì)也將迎來(lái)更多的響應(yīng)式設(shè)計(jì)元素。

參考文獻(xiàn)：

[1]阮一峰.自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)[EB/OL]./http：//www.ruany.ifeng.com/blog/2012/05.

[2]Ben Frain.王永強(qiáng)，譯.響應(yīng)式Web設(shè)計(jì)[M].北京：人民郵電出版社，2013.

[3]王柯柯.Web網(wǎng)頁(yè)設(shè)計(jì)技術(shù)[M].北京：清華大學(xué)出版社，2011.

[4]許中博.“響應(yīng)式”網(wǎng)頁(yè)布局設(shè)計(jì)淺析[J].黑龍江科技信息，2012（26）：106.

作者簡(jiǎn)介：游琪（1981-），女，江西九江人，碩士研究生，講師，研究方向：計(jì)算機(jī)應(yīng)用、數(shù)據(jù)庫(kù)。

作者單位：廣東科學(xué)技術(shù)職業(yè)學(xué)院，廣東珠海 519090