基于響應(yīng)式技術(shù)的電子地圖網(wǎng)頁(yè)設(shè)計(jì)研究

摘 要：響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)可以解決網(wǎng)頁(yè)在不同大小的設(shè)備上的顯示問(wèn)題，而電子地圖的顯示要求要比普通網(wǎng)頁(yè)復(fù)雜，在其頁(yè)面設(shè)計(jì)過(guò)程中需結(jié)合響應(yīng)式技術(shù)和padding百分比占位來(lái)實(shí)現(xiàn)電子地圖適應(yīng)不同的視口大小。

關(guān)鍵詞：響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)；電子地圖；媒體查詢；CSS

中圖分類(lèi)號(hào)：TP393.092 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：2096-4706（2019）02-0069-03

Abstract：Responsive web design can solve the problem of displaying web pages on different sizes of devices，and the display requirements of electronic maps are more complex than ordinary web pages. In the process of page design，we need to combine the responsive technology and padding percentage occupancy to achieve electronic maps to adapt to different viewport sizes.

Keywords：responsive web design；electronic map；media query；CSS

0 引 言

隨著4G的普及，移動(dòng)互聯(lián)網(wǎng)使智能手機(jī)全方位地融入人們的生活，越來(lái)越多的人使用手機(jī)上網(wǎng)。傳統(tǒng)針對(duì)顯示器屏幕開(kāi)發(fā)的網(wǎng)站，對(duì)各種屏幕尺寸不一的智能移動(dòng)設(shè)備在兼容性方面表現(xiàn)出嚴(yán)重不足，使網(wǎng)頁(yè)設(shè)計(jì)師也不得不面對(duì)一個(gè)難題：如何才能在不同大小的設(shè)備上呈現(xiàn)同樣的網(wǎng)頁(yè)？筆者在研究設(shè)計(jì)適用于鄉(xiāng)村旅游的Web地圖旅游查詢系統(tǒng)過(guò)程中，即碰到電子地圖的顯示問(wèn)題——電子地圖如何適應(yīng)不同終端設(shè)備的顯示。

在我國(guó)鄉(xiāng)村振興過(guò)程中，“美麗鄉(xiāng)村”的建設(shè)催熱了鄉(xiāng)村旅游，以泉州市永春縣為例，除了7個(gè)旅游景區(qū)之外，數(shù)十個(gè)鄉(xiāng)村景點(diǎn)也成了人們的旅游熱點(diǎn)，游客可以借助Web地圖旅游查詢系統(tǒng)查詢景點(diǎn)并導(dǎo)航到目的地，這為人們的出行旅游特別是自駕游提供了很大的便利。結(jié)合其用途，游客使用手機(jī)操作該系統(tǒng)的概率很大，因此系統(tǒng)頁(yè)面的設(shè)計(jì)要能同時(shí)適應(yīng)PC端和移動(dòng)端的屏幕。通過(guò)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)可以解決文字或圖片網(wǎng)頁(yè)在不同設(shè)備上的顯示。

然而，電子地圖的設(shè)計(jì)要求不同于文字或圖片。因?yàn)殡娮拥貓D需要顯示地圖和景點(diǎn)的信息窗，所以電子地圖的顯示區(qū)域應(yīng)保持適當(dāng)大小，以占據(jù)屏幕的主要部分又不超出屏幕顯示范圍為宜。尤其對(duì)移動(dòng)設(shè)備，比如手機(jī)的屏幕比較小，電子地圖如果占用的空間小則影響用戶的查看；如果滿屏顯示則影響用戶瀏覽網(wǎng)頁(yè)，因?yàn)榛瑒?dòng)頁(yè)面時(shí)如碰觸地圖部分則只會(huì)拖動(dòng)地圖而不會(huì)拖動(dòng)網(wǎng)頁(yè)。另一方面，對(duì)于移動(dòng)端的屏幕，又有豎屏和橫屏顯示的情況，因此電子地圖的寬度和高度會(huì)隨手持方向變化而變化。歸結(jié)起來(lái)主要有三個(gè)方面的要求：一是電子地圖寬度能根據(jù)瀏覽器視口寬度自動(dòng)調(diào)整，二是電子地圖能自適應(yīng)高度，三是根據(jù)設(shè)備的手持方向調(diào)整高度和寬度的比。

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

1.1 概念

2010年，Ethan Marcotte提出了“Responsive Web Design”，即響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)。響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)是指根據(jù)用戶的使用設(shè)備，使用情境以及使用行為來(lái)調(diào)整網(wǎng)頁(yè)的版式、內(nèi)容、功能和交互方式的設(shè)計(jì)方法。其設(shè)計(jì)與開(kāi)發(fā)的網(wǎng)頁(yè)能智能地根據(jù)系統(tǒng)平臺(tái)、屏幕尺寸和屏幕定向等進(jìn)行相應(yīng)的響應(yīng)和調(diào)整，即網(wǎng)頁(yè)能自動(dòng)適應(yīng)不同大小窗口，它突破了面向桌面電腦固定寬度設(shè)計(jì)，是一種面向任意設(shè)備的網(wǎng)頁(yè)。

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

響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)是對(duì)當(dāng)前網(wǎng)頁(yè)設(shè)計(jì)方法理念的全面顛覆，它首先設(shè)計(jì)小屏幕網(wǎng)頁(yè)，之后逐漸添加內(nèi)容，增強(qiáng)大屏幕的視覺(jué)效果。響應(yīng)式網(wǎng)頁(yè)開(kāi)發(fā)應(yīng)遵循“移動(dòng)優(yōu)先、漸進(jìn)增強(qiáng)”的設(shè)計(jì)思想。“移動(dòng)優(yōu)先”指由于各種移動(dòng)設(shè)備屏幕尺寸不同，布局與顯示效果較為復(fù)雜，優(yōu)先考慮移動(dòng)設(shè)備的設(shè)計(jì)，有利于提高響應(yīng)式網(wǎng)頁(yè)的開(kāi)發(fā)效率。“漸進(jìn)增強(qiáng)”有兩重涵義：一是指響應(yīng)式網(wǎng)頁(yè)從小屏幕向大屏幕的順序進(jìn)行開(kāi)發(fā)，在小屏幕中，由于顯示空間有限，網(wǎng)頁(yè)要突出主要內(nèi)容，表現(xiàn)方面有所簡(jiǎn)化，隨著屏幕增大，網(wǎng)頁(yè)的顯示效果越來(lái)越豐富；二是指讓網(wǎng)頁(yè)兼容各類(lèi)版本的瀏覽器的情況下，為高級(jí)瀏覽器追加新效果以提高用戶體驗(yàn)。

2 基于響應(yīng)式技術(shù)的電子地圖頁(yè)面設(shè)計(jì)過(guò)程

下面以百度地圖為例對(duì)電子地圖響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的實(shí)現(xiàn)方法進(jìn)行研究。

2.1 響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的實(shí)現(xiàn)

首先，在網(wǎng)頁(yè)代碼的頭部，加入一行viewport元標(biāo)簽，設(shè)置網(wǎng)頁(yè)寬度（width）默認(rèn)等于屏幕寬度（width= device-width），原始縮放比例為1.0（initial-scale=1），即網(wǎng)頁(yè)初始大小占屏幕面積的100%。其代碼如下：

所有主流瀏覽器都支持這個(gè)設(shè)置，但對(duì)于老式瀏覽器（主要是IE6、7、8），需要使用css3-mediaqueries.js，其代碼如下：

<！--[if lt IE 9]><！[endif]-->

其次，采用流動(dòng)布局，即各個(gè)區(qū)塊的位置都是浮動(dòng)的。流式布局是一種多欄布局，可以一行顯示多個(gè)欄目，也可以換行顯示，隨著設(shè)備終端寬度不同而調(diào)整。如果寬度太小放不下兩個(gè)元素，后面的元素會(huì)自動(dòng)滾動(dòng)到前面元素的下方，不會(huì)在水平方向overflow（溢出），避免了水平滾動(dòng)條的出現(xiàn)。流式布局將頁(yè)面中欄目的寬度單位設(shè)置為相對(duì)值，使得頁(yè)面布局能夠靈活適應(yīng)終端屏幕寬度。其CSS代碼如下：

.row{float：left；}

最后，利用CSS3的媒體查詢（media query）語(yǔ)句選擇加載CSS。媒體查詢是響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的關(guān)鍵，這里媒體是指瀏覽內(nèi)容所使用的各種電子設(shè)備，如屏幕、打印機(jī)和投影儀等。它是CSS3對(duì)Media Type的增強(qiáng)版，可以將其看成Media Type（判斷條件）+CSS（符合條件的樣式規(guī)則），像判斷語(yǔ)句，告訴瀏覽器根據(jù)不同的視口寬度（即瀏覽器顯示頁(yè)面內(nèi)容的屏幕區(qū)域）來(lái)渲染網(wǎng)頁(yè)。media query的語(yǔ)法如下：

@media媒體類(lèi)型and|not|only（媒體特征）{...}

其中，媒體類(lèi)型有10種，其中用于表示電腦，平板電腦，智能手機(jī)等屏幕的是“screen”；媒體特征有13種，其中需要用到的屬性是視口的寬和高（width，height）、設(shè)備的手持方向（orientation）。

媒體查詢的大部分媒體特征都接受min和max用于表達(dá)“大于或等于”和“小于或等于”，如：width會(huì)有min-width和max-width媒體查詢，max-width表示定義輸出設(shè)備中的頁(yè)面可見(jiàn)的最大寬度，min-width表示定義輸出設(shè)備中的頁(yè)面可見(jiàn)的最小寬度。而orientation只能指定兩個(gè)值：portrait和landscape，表示瀏覽器窗口的方向是縱向還是橫向，當(dāng)窗口高度大于等于寬度值時(shí)該特性值為portrait（豎屏），否則為landscape（橫屏）。

以百度地圖的顯示容器為例，當(dāng)視口寬度小于等于800px時(shí)，容器寬度為視口寬度的95%；當(dāng)視口寬度大于800px時(shí)，容器寬度為視口寬度的86%。其實(shí)現(xiàn)代碼如下：

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

#container{ width：86%；}

}

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

#container{ width：95%； }

}

2.2 利用padding百分比占位，實(shí)現(xiàn)高度自適應(yīng)

通過(guò)設(shè)置容器div的寬度值為百分比可以實(shí)現(xiàn)寬度的自適應(yīng)效果，但高度就比較復(fù)雜了，因?yàn)闉g覽器在計(jì)算有效寬度時(shí)會(huì)考慮瀏覽器窗口的打開(kāi)寬度，而高度是被內(nèi)容撐開(kāi)的，一般是不固定的，也沒(méi)有缺省值。這里電子地圖的高度是由容器的高度決定，因此地圖是無(wú)法撐開(kāi)容器的。

另一方面，當(dāng)父元素沒(méi)有設(shè)定固定高度，那么子元素的高度通過(guò)百分比來(lái)設(shè)置，得到也是一個(gè)空值，高度百分比只有在父元素高度固定的情況下才生效。而電子地圖的高度需要根據(jù)寬度大小設(shè)定不同的值以提高地圖的顯示面積并適應(yīng)不同屏幕大小的視口高度，從而達(dá)到最佳顯示效果——根據(jù)地圖旅游查詢系統(tǒng)開(kāi)發(fā)需要，將高度設(shè)置為：當(dāng)視口寬度大于800px時(shí)，設(shè)置地圖高度為地圖寬度的50%，當(dāng)視口寬度小于等于800px時(shí)，設(shè)置地圖高度為視口寬度的120%。

這里我們可以利用CSS的margin/padding來(lái)實(shí)現(xiàn)自適應(yīng)高度。當(dāng)給它們賦值為百分比時(shí)，參照的是父元素的寬度，比如：父元素寬度是100px，子元素padding-bottom：50%，那么padding-bottom的實(shí)際值就是100*50%=50px。這樣可得到具體的margin/padding值。通過(guò)這種方式可以提前占位，可以讓高度自適應(yīng)。其實(shí)現(xiàn)代碼如下：

這里container容器參數(shù)padding的百分比參照物是父元素的寬度，而容器的width的百分比參照物也是父元素的寬度，二者屬性參照物一致，結(jié)合起來(lái)即可實(shí)現(xiàn)地圖的自適應(yīng)寬度和高度。

2.3 根據(jù)設(shè)備的手持方向調(diào)整高度和寬度的比

當(dāng)手機(jī)手持方向?yàn)樨Q屏方向時(shí)，地圖容器的高度比寬度大，但當(dāng)手機(jī)手持方向?yàn)闄M向是，地圖的高度就需要比寬度小，要實(shí)現(xiàn)該功能，只要結(jié)合媒體查詢和padding應(yīng)用技巧即可實(shí)現(xiàn)。其實(shí)現(xiàn)代碼如下：

@media screen and （orientation： landscape）{//為橫屏方向時(shí)

#container{padding-bottom： 36%；width： 95%；height：0；

margin：auto；border： 1px solid #9bdf70；}

}

2.4 測(cè)試結(jié)果

經(jīng)測(cè)試，設(shè)計(jì)開(kāi)發(fā)出來(lái)的電子地圖頁(yè)面能滿足其三個(gè)方面的設(shè)計(jì)要求，以手機(jī)橫屏顯示為例，其顯示效果如圖1所示。

3 結(jié) 論

如今，移動(dòng)設(shè)備正超過(guò)桌面設(shè)備成為人們?cè)L問(wèn)互聯(lián)網(wǎng)的最常見(jiàn)終端，采用響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)能滿足不同設(shè)備的使用需求，增加系統(tǒng)的設(shè)備覆蓋率。在Web地圖旅游查詢系統(tǒng)開(kāi)發(fā)過(guò)程中，結(jié)合響應(yīng)式技術(shù)和padding的占位技巧，可以使電子地圖的顯示窗口適應(yīng)不同屏幕大小，在“能顯示的內(nèi)容”和“最適合屏幕大小”之間取得很好地平衡，使用戶獲得更好的操作體驗(yàn)。

參考文獻(xiàn)：

[1] 張樹(shù)明.基于響應(yīng)式Web設(shè)計(jì)的網(wǎng)頁(yè)模板的設(shè)計(jì)與實(shí)現(xiàn) [J].計(jì)算機(jī)與現(xiàn)代化，2013（6）：125-127.

[2] 吳多智，陳益全.響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)案例實(shí)現(xiàn)與分析 [J].安徽電子信息職業(yè)技術(shù)學(xué)院學(xué)報(bào)，2016，15（2）：14-17+23.

[3] 李倩.面向不同設(shè)備的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)探析 [J].教育教學(xué)論壇，2017（12）：82-83.

[4] 毛娟.網(wǎng)頁(yè)制作中應(yīng)用媒介查詢實(shí)現(xiàn)響應(yīng)式布局 [J].電腦編程技巧與維護(hù)，2016（19）：45-46.

[5] 徐健.響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)案例實(shí)現(xiàn)與分析 [J].信息與電腦（理論版），2018（6）：13-15.

作者簡(jiǎn)介：劉瑞冰（1984-），男，福建永春人，教師，講師，碩士，研究方向：計(jì)算機(jī)教學(xué)、計(jì)算機(jī)軟件設(shè)計(jì)。