自适应网页技术研究与应用实践

摘 要：蔬菜溯源系统提供了对蔬菜安全的全程跟踪，可以有效缓解蔬菜的安全问题。本文针对系统中的溯源数据在消费者终端设备的不同的呈现进行了研究。通过采用CSS3中所引入的Media Query模块，采用相对宽度、相对大小等形式进行了实践。通过实践得出了一种可行的方法，在文中我们对此方法进行了阐述。

关键词：溯源；自适应网页；CSS3

1 概述

食品安全是关系到人身安全的大事，在食品安全越来越受关注的时候，人们对食品安全提出了越来越高的要求。建立适宜的农产品溯源体系不仅能为人民生活提供安全优质的农产品，也能够打破国外食品安全追溯而设置的贸易壁垒，提高我国农产品的国际竞争力。

因为移动设备种类的多样性和移动网络的快速发展，要为消费者提供快速、易用的溯源请求响应，成为了设计者面对的一个大难题：如何才能在不同大小的设备上呈现同样的数据信息？手机的屏幕比较小，宽度通常在600像素以下；台式机或笔记本电脑的屏幕宽度，一般都在1000像素以上（目前主流宽度是1366×768）。同样的内容，要在大小完全不同的屏幕上，都呈现出满意的效果，并不是一件易于实现的事。

很多系统的解决方法，是为不同的设备提供不同的网页，比如专门提供一个移动设备版本，一个ipad版本和一个电脑版本。这样做固然保证了效果，但是工作量较大，并且同时需要维护好几个版本，会大大增加架构设计的复杂度和软件维护的难度。有没有能很好地解决这个问题的办法，本文对这个问题进行了理论探讨和实践性研究。

2 设计思路

蔬菜安全溯源系统主要用于管理蔬菜从生产中心、加工中心、运输过程到销售地点的整个过程，让消费者和监管部门可以追根溯源。本系统包含三大块内容：①生产者、运输者和销售者提供过程数据，采集到溯源系统数据库；②溯源平台对监管部门提供监管借口，确保过程采集数据真实有效；③满足最终消费者对产品进行溯源的需求，也就是提供查询功能。蔬菜安全溯源系统架构见图1。

其中，消费者对产品信息的溯源可能通过销售地点所提供的触摸屏系统来进行，也可能通过随身携带的手机等移动设备来联网溯源，还有可能通过家用台式电脑或笔记本电脑来进行溯源。也就让我们所提供的溯源数据面对着来自不同屏幕大小的设备的请求。本文也就以此为例来对如何让页面自动适应不同大小屏幕的显示进行了研究。

3 关键技术

3.1 PHP服务端技术

PHP（英文名称PHP： Hypertext Preprocessor，中文名称“超文本预处理器”）是一种通用开源脚本语言。语法吸收了C、Java和Perl语言的特点，易于学习，应用广泛，主要适用于Web开发领域。它比CGI或者Perl更快速地执行动态网页。用PHP做出的动态页面与其他的编程语言相比执行效率更高，同时PHP也可以将程序嵌入到HTML（标准通用标记语言下的一个应用）文档中去执行。在本系统中，主要用于在服务端和数据库间的通讯，并为监管部门和最终用户提供监管接口和溯源数据。

3.2 自适应网页技术

“自适应网页设计”（Responsive Web Design）最早是在2010年由Ethan Marcotte提出，指可以自动识别屏幕宽度并做出相应调整的网页设计方法。相对于传统的网页设计，其主要区别在于：①网页能根据屏幕的宽度进行调整；②网页的布局采用流式布局；③页面宽度、字体等不能采用绝对大小，应采用相对大小；④选择加载的CSS文件。

这行代码意思是，如果最大屏幕宽度不超过600像素（max-device-width：600px），就加载microScreen.css文件，从而实现在不同的屏幕宽度设备下，加载不同的显示配置文件。也就是网页能够自动适应屏幕的技术基础。

4 关键实现及分析

4.1 PHP动态页面代码

实现后，在电脑端呈现结果显示正常，同时在手机端呈现的测试数据显示结果如图2，正常。

5 展望

本文通过PHP动态生成数据，再在html端重点运用CSS3中所引入的Media Query模块所提供的工作，针对不同的屏幕显示进行了实践研究。在本文研究的基础上，可以对在不同屏幕上显示不同大小的图片进行改进，也就是根据屏幕，加载不同的图片。有待诸位同行一起进行进一步的研究。

参考文献：

[1]张伟，何勇，等.基于无线传感器网络与模糊控制的精细灌溉系统的设计[J].农业工程学报，2009.

[2]劉爱军.物联网技术现状及应用前景展望[J].物联网技术，2012.

[3]白志强，白志刚，等.21天学通PHP[M].电子工业出版社，2009.

作者简介：姚世明（1979-），男，江苏姜堰人，研究方向：软件工程、应用软件设计与开发。