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

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

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

中圖分類號：TP393.092 文獻(xiàn)標(biāo)識碼：A 文章編號：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的普及，移動互聯(lián)網(wǎng)使智能手機(jī)全方位地融入人們的生活，越來越多的人使用手機(jī)上網(wǎng)。傳統(tǒng)針對顯示器屏幕開發(fā)的網(wǎng)站，對各種屏幕尺寸不一的智能移動設(shè)備在兼容性方面表現(xiàn)出嚴(yán)重不足，使網(wǎng)頁設(shè)計師也不得不面對一個難題：如何才能在不同大小的設(shè)備上呈現(xiàn)同樣的網(wǎng)頁？筆者在研究設(shè)計適用于鄉(xiāng)村旅游的Web地圖旅游查詢系統(tǒng)過程中，即碰到電子地圖的顯示問題——電子地圖如何適應(yīng)不同終端設(shè)備的顯示。

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

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

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

1.1 概念

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

1.2 設(shè)計思想

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

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

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

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

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

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

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

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

.row{float：left；}

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

@media媒體類型and|not|only（媒體特征）{...}

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

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

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

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

#container{ width：86%；}

}

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

#container{ width：95%； }

}

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

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

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

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

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

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

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

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

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

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

}

2.4 測試結(jié)果

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

3 結(jié) 論

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

參考文獻(xiàn)：

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

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

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

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

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

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