基于Bootstrap的农业监控系统响应式网页设计与实现

现代农业是一个广泛的概念，调整农业产业结构的同时 转变农业产值增长方式是目前农业主要的发展方向。

农业监控系统是智慧农业的延伸，依托现代物联网技术， 用户通过使用多终端设备就能方便获取并查看大棚内的作物 数据信息。但农业监控系统在网页浏览的媒介上还存在欠缺， 如通过不同的设备访问网页时会为用户带来不同的体验。因此， 需要在界面设计和美观方面改善提升。

传统页面布局主要由导航栏、页脚、主内容、左右侧边 栏构成，具体如图 1 所示。

以农业监控系统网页为例，可以看出整个页面的信息量 并不大，同时可利用导航栏减少页面切换，因此很多传统网 页都使用类似经典设计。但现代互联网发展迅速，数据量大， 容易造成页面拥挤、结构复杂、操作不便等问题，不利于用户 体验。

此时运用 Bootstrap 自身优点，将导航栏移动至页面最顶 端，而将内容区域置于中间，两边分别为左右侧边栏，底部为 页脚。这样设计可充分利用框架特点，自适应浏览器页面。

3 多终端设备测试

响应式是自适应不同的应用场景，但在内容上保持一致 的设计方式。将分别在 PC 终端和移动端进行测试。

3.1 PC 端测试

现在浏览器呈多样化，且网页渲染效果与浏览器内核有 关。 文中选 择 Trident、Gecko、Blink 以 及 WebKit 内核 在 Windows 系统上进行测试。由于 IE 浏览器兼容性不好，且 对 Bootstrap 不支 持， 故不选 择 IE 浏览 器。1 280×780 和 1 440×900 的效果图分别如图 3、图 4 所示。

3.2 移动端测试

由于移动端设备的多样化，需要在不同设备上进行测试。 为此，文中选用 Chrome 调试模式模拟移动设备进行测试，效 果如图 5 和图 6 所示。可以看到网页在移动设备上显示时，导 航栏隐藏了，页面也呈垂直结构。

通过以上测试可知，所有设计效果和功能都能正常显示 并应用。

 4 结 语

根据不同测试结果分析可知，由于只设计了大屏和手机 显示两种情况，并且在页头部分使用的元素相对较多，使得浏 览器兼容性还存在欠缺，此时便依赖媒体查询来进一步自适 应屏幕大小。另一方面，浏览器的快速更新使得响应式问题 逐步得到解决。总体来看，虽然响应式网页还存在一些不足， 但网页可自适应并美观这一目标已经达到，大大提高了用户对 系统的操作体验。