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

-精选财经经济类资料- -最新财经经济资料-感谢阅读- 1 自适应网页技术研究与应用实践 摘 要：蔬菜溯源系统提供了对 蔬菜安全的全程跟踪，可以有效缓解蔬 菜的安全问题。本文针对系统中的溯源 数据在消费者终端设备的不同的呈现进 行了研究。通过采用 CSS3 中所引入的 Media Query 模块，采用相对宽度、相 对大小等形式进行了实践。通过实践得 出了一种可行的方法，在文中我们对此 方法进行了阐述。 中国论文网 /4/view-12748580.htm 关键词：溯源；自适应网页； CSS3 1 概述 食品安全是关系到人身安全的大 事，在食品安全越来越受关注的时候， -精选财经经济类资料- -最新财经经济资料-感谢阅读- 2 人们对食品安全提出了越来越高的要求。 建立适宜的农产品溯源体系不仅能为人 民生活提供安全优质的农产品，也能够 打破国外食品安全追溯而设置的贸易壁 垒，提高我国农产品的国际竞争力。 因为移动设备种类的多样性和移 动网络的快速发展，要为消费者提供快 速、易用的溯源请求响应，成为了设计 者面对的一个大难题：如何才能在不同 大小的设备上呈现同样的数据信息？手 机的屏幕比较小，宽度通常在 600 像素 以下；台式机或笔记本电脑的屏幕宽度， 一般都在 1000 像素以上（目前主流宽 度是 1366768） 。同样的内容，要在大 小完全不同的屏幕上，都呈现出满意的 效果，并不是一件易于实现的事。 很多系统的解决方法，是为不同 的设备提供不同的网页，比如专门提供 一个移动设备版本，一个 ipad 版本和一 个电脑版本。这样做固然保证了效果， 但是工作量较大，并且同时需要维护好 几个版本，会大大增加架构设计的复杂 -精选财经经济类资料- -最新财经经济资料-感谢阅读- 3 度和软件维护的难度。有没有能很好地 解决这个问题的办法，本文对这个问题 进行了理论探讨和实践性研究。 2 设计思路 蔬菜安全溯源系统主要用于管理 蔬菜从生产中心、加工中心、运输过程 到销售地点的整个过程，让消费者和监 管部门可以追根溯源。本系统包含三大 块内容：生产者、运输者和销售者提 供过程数据，采集到溯源系统数据库； 溯源平台对监管部门提供监管借口， 确保过程采集数据真实有效；满足最 终消费者对产品进行溯源的需求，也就 是提供查询功能。蔬菜安全溯源系统架 构见图 1。 其中，消费者对产品信息的溯源 可能通过销售地点所提供的触摸屏系统 来进行，也可能通过随身携带的手机等 移动设备来联网溯源，还有可能通过家 用台式电脑或笔记本电脑来进行溯源。 也就让我们所提供的溯源数据面对着来 自不同屏幕大小的设备的请求。本文也 -精选财经经济类资料- -最新财经经济资料-感谢阅读- 4 就以此为例来对如何让页面自动适应不 同大小屏幕的显示进行了研究。 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 提出，指可以自动识别屏幕宽 -精选财经经济类资料- -最新财经经济资料-感谢阅读- 5 度并做出相应调整的网页设计方法。相 对于传统的网页设计，其主要区别在于： 网页能根据屏幕的宽度进行调整； 网页的布局采用流式布局；页面宽度、 字体等不能采用绝对大小，应采用相对 大小；选择加载的 CSS 文件。 这行代码意思是，如果最大屏幕 宽度不超过 600 像素（max-device- width：600px） ，就加载 microScreen.css 文件，从而实现在不同的屏幕宽度设备 下，加载不同的显示配置文件。也就是 网页能够自动适应屏幕的技术基础。 4 关键实现及分析 4.1 PHP 动态页面代码 实现后，在电脑端呈现结果显示 正常，同时在手机端呈现的测试数据显 示结果如图 2，正常。 5 展望 本文通过 PHP 动态生成数据， 再在 html 端重点运用 CSS3 中所引入的 Media Query 模块所提供的工作，针对 不同的屏幕显示进行了实践