基于响应式技术的电子地图网页设计研究

摘 要：响应式网页设计可以解决网页在不同大小的设备上的显示问题，而电子地图的显示要求要比普通网页复杂，在其页面设计过程中需结合响应式技术和padding百分比占位来实现电子地图适应不同的视口大小。

关键词：响应式网页设计；电子地图；媒体查询；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的普及，移动互联网使智能手机全方位地融入人们的生活，越来越多的人使用手机上网。传统针对显示器屏幕开发的网站，对各种屏幕尺寸不一的智能移动设备在兼容性方面表现出严重不足，使网页设计师也不得不面对一个难题：如何才能在不同大小的设备上呈现同样的网页？笔者在研究设计适用于乡村旅游的Web地图旅游查询系统过程中，即碰到电子地图的显示问题——电子地图如何适应不同终端设备的显示。

在我国乡村振兴过程中，“美丽乡村”的建设催热了乡村旅游，以泉州市永春县为例，除了7个旅游景区之外，数十个乡村景点也成了人们的旅游热点，游客可以借助Web地图旅游查询系统查询景点并导航到目的地，这为人们的出行旅游特别是自驾游提供了很大的便利。结合其用途，游客使用手机操作该系统的概率很大，因此系统页面的设计要能同时适应PC端和移动端的屏幕。通过响应式网页设计可以解决文字或图片网页在不同设备上的显示。

然而，电子地图的设计要求不同于文字或图片。因为电子地图需要显示地图和景点的信息窗，所以电子地图的显示区域应保持适当大小，以占据屏幕的主要部分又不超出屏幕显示范围为宜。尤其对移动设备，比如手机的屏幕比较小，电子地图如果占用的空间小则影响用户的查看；如果满屏显示则影响用户浏览网页，因为滑动页面时如碰触地图部分则只会拖动地图而不会拖动网页。另一方面，对于移动端的屏幕，又有竖屏和横屏显示的情况，因此电子地图的宽度和高度会随手持方向变化而变化。归结起来主要有三个方面的要求：一是电子地图宽度能根据浏览器视口宽度自动调整，二是电子地图能自适应高度，三是根据设备的手持方向调整高度和宽度的比。

1 响应式网页设计

1.1 概念

2010年，Ethan Marcotte提出了“Responsive Web Design”，即响应式网页设计。响应式网页设计是指根据用户的使用设备，使用情境以及使用行为来调整网页的版式、内容、功能和交互方式的设计方法。其设计与开发的网页能智能地根据系统平台、屏幕尺寸和屏幕定向等进行相应的响应和调整，即网页能自动适应不同大小窗口，它突破了面向桌面电脑固定宽度设计，是一种面向任意设备的网页。

1.2 设计思想

响应式网页设计是对当前网页设计方法理念的全面颠覆，它首先设计小屏幕网页，之后逐渐添加内容，增强大屏幕的视觉效果。响应式网页开发应遵循“移动优先、渐进增强”的设计思想。“移动优先”指由于各种移动设备屏幕尺寸不同，布局与显示效果较为复杂，优先考虑移动设备的设计，有利于提高响应式网页的开发效率。“渐进增强”有两重涵义：一是指响应式网页从小屏幕向大屏幕的顺序进行开发，在小屏幕中，由于显示空间有限，网页要突出主要内容，表现方面有所简化，随着屏幕增大，网页的显示效果越来越丰富；二是指让网页兼容各类版本的浏览器的情况下，为高级浏览器追加新效果以提高用户体验。

2 基于响应式技术的电子地图页面设计过程

下面以百度地图为例对电子地图响应式网页设计的实现方法进行研究。

2.1 响应式网页设计的实现

首先，在网页代码的头部，加入一行viewport元标签，设置网页宽度（width）默认等于屏幕宽度（width= device-width），原始缩放比例为1.0（initial-scale=1），即网页初始大小占屏幕面积的100%。其代码如下：

所有主流浏览器都支持这个设置，但对于老式浏览器（主要是IE6、7、8），需要使用css3-mediaqueries.js，其代码如下：

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

其次，采用流動布局，即各个区块的位置都是浮动的。流式布局是一种多栏布局，可以一行显示多个栏目，也可以换行显示，随着设备终端宽度不同而调整。如果宽度太小放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow（溢出），避免了水平滚动条的出现。流式布局将页面中栏目的宽度单位设置为相对值，使得页面布局能够灵活适应终端屏幕宽度。其CSS代码如下：

.row{float：left；}

最后，利用CSS3的媒体查询（media query）语句选择加载CSS。媒体查询是响应式网页设计的关键，这里媒体是指浏览内容所使用的各种电子设备，如屏幕、打印机和投影仪等。它是CSS3对Media Type的增强版，可以将其看成Media Type（判断条件）+CSS（符合条件的样式规则），像判断语句，告诉浏览器根据不同的视口宽度（即浏览器显示页面内容的屏幕区域）来渲染网页。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%。其實现代码如下：

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

#container{ width：86%；}

}

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

#container{ width：95%； }

}

2.2 利用padding百分比占位，实现高度自适应

通过设置容器div的宽度值为百分比可以实现宽度的自适应效果，但高度就比较复杂了，因为浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度，而高度是被内容撑开的，一般是不固定的，也没有缺省值。这里电子地图的高度是由容器的高度决定，因此地图是无法撑开容器的。

另一方面，当父元素没有设定固定高度，那么子元素的高度通过百分比来设置，得到也是一个空值，高度百分比只有在父元素高度固定的情况下才生效。而电子地图的高度需要根据宽度大小设定不同的值以提高地图的显示面积并适应不同屏幕大小的视口高度，从而达到最佳显示效果——根据地图旅游查询系统开发需要，将高度设置为：当视口宽度大于800px时，设置地图高度为地图宽度的50%，当视口宽度小于等于800px时，设置地图高度为视口宽度的120%。

这里我们可以利用CSS的margin/padding来实现自适应高度。当给它们赋值为百分比时，参照的是父元素的宽度，比如：父元素宽度是100px，子元素padding-bottom：50%，那么padding-bottom的实际值就是100*50%=50px。这样可得到具体的margin/padding值。通过这种方式可以提前占位，可以让高度自适应。其实现代码如下：

这里container容器参数padding的百分比参照物是父元素的宽度，而容器的width的百分比参照物也是父元素的宽度，二者属性参照物一致，结合起来即可实现地图的自适应宽度和高度。

2.3 根据设备的手持方向调整高度和宽度的比

当手机手持方向为竖屏方向时，地图容器的高度比宽度大，但当手机手持方向为横向是，地图的高度就需要比宽度小，要实现该功能，只要结合媒体查询和padding应用技巧即可实现。其实现代码如下：

@media screen and （orientation： landscape）{//为横屏方向时

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

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

}

2.4 测试结果

经测试，设计开发出来的电子地图页面能满足其三个方面的设计要求，以手机横屏显示为例，其显示效果如图1所示。

3 结 论

如今，移动设备正超过桌面设备成为人们访问互联网的最常见终端，采用响应式网页设计能满足不同设备的使用需求，增加系统的设备覆盖率。在Web地图旅游查询系统开发过程中，结合响应式技术和padding的占位技巧，可以使电子地图的显示窗口适应不同屏幕大小，在“能显示的内容”和“最适合屏幕大小”之间取得很好地平衡，使用户获得更好的操作体验。

参考文献：

[1] 张树明.基于响应式Web设计的网页模板的设计与实现 [J].计算机与现代化，2013（6）：125-127.

[2] 吴多智，陈益全.响应式网页设计案例实现与分析 [J].安徽电子信息职业技术学院学报，2016，15（2）：14-17+23.

[3] 李倩.面向不同设备的响应式网页设计探析 [J].教育教学论坛，2017（12）：82-83.

[4] 毛娟.网页制作中应用媒介查询实现响应式布局 [J].电脑编程技巧与维护，2016（19）：45-46.

[5] 徐健.响应式网页设计案例实现与分析 [J].信息与电脑（理论版），2018（6）：13-15.

作者简介：刘瑞冰（1984-），男，福建永春人，教师，讲师，硕士，研究方向：计算机教学、计算机软件设计。