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

關鍵詞：響應式網(wǎng)頁設計；電子地圖；媒體查詢；CSS

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

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

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

1 響應式網(wǎng)頁設計

1.1 概念

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

1.2 設計思想

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

2 基于響應式技術的電子地圖頁面設計過程

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

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

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

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

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

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

.row{float：left；}

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

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

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

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

以百度地圖的顯示容器為例，當視口寬度小于等于800px時，容器寬度為視口寬度的95%；當視口寬度大于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)高度自適應

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

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

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

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

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

當手機手持方向為豎屏方向時，地圖容器的高度比寬度大，但當手機手持方向為橫向是，地圖的高度就需要比寬度小，要實現(xiàn)該功能，只要結合媒體查詢和padding應用技巧即可實現(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 測試結果

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

3 結 論

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

參考文獻：

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

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

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

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

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

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