基于响应式web设计的质量工程论文范文
时间：2022-01-25 09:18:30
一、系统基于响应式web设计的需求
质量工程管理系统是滁州职业技术学院教务处用于管理审批学院科研项目的一个web系统。本系统采用响应式web设计技术，基于B/S模式，在J2EE平台上开发和实现。在项目开发之前，为了构建响应式web设计的开发框架，必须先确定系统整体的需求。由于质量工程管理系统的主要用户是学院教师，因此，采用调查问卷的方式对学院教师进行了需求调查，以确定用户使用移动设备的类型和所关心的具体的功能需求，便于规划出几种典型的响应式布局方式。经过对调查结果进行分析统计，系统用户使用的移动设备类型及分辨率主要有PC机（1024×768或更高）、Android智能终端（480×800）、iPad（640×960）三种类型，使用这三种分辨率大小的用户占了被调查用户的绝大部分。同时，确定了质量工程管理系统的主要功能模块。注册用户通过用户名和密码在登陆页面登陆成功后，即可看到主页面内容，主页面导航栏由“公告栏”、“新申报项目”和“我的项目”三个栏目组成，其中“我的项目”包括“立项建设”、“材料上报记录”、“申报记录”和“已结项”四个子菜单项。
二、系统基于响应式web设计的实现
1采用弹性布局一个系统如果没有一个良好的用户体验度，那么里面的内容就算设计的再好，也算不上是一个成功的系统。由于质量工程管理系统用户使用的设备类型各异，访问设备屏幕尺寸大小不一。如果采用传统的两栏或三栏固定宽度的布局方式，虽然符合PC机用户的使用习惯，但必然不适合在移动终端设备上进行展示，使移动设备用户缺乏体验。因此，系统布局设计必须相对灵活，能够针对不同分辨率的设备自适应调整。为了实现更灵活的布局设计，能在多种类型设备的显示器中完美显示，我们需要对页面元素采用弹性布局。所谓弹性布局就是不使用固定宽度限制页面元素的显示范围，这样才能让页面元素根据所使用设备的显示器分辨率大小灵活伸缩显示。弹性布局是一切响应式布局的基础，只有在弹性布局的基础上使用其他web设计技术才能让页面在不同的访问设备中很好的呈现。弹性布局要求包含元素的宽度单位全部采用百分比，同时设定包含元素的最大和最小宽度。根据前期分析和页面弹性布局要求，在主页面中，页面头部（Header）、底部（Footer）固定，占满整个一行，因此宽度设定为100%，中间部分（Container）分成左侧边栏区和右侧正文区两部分，宽度分别设定为25%和75%。采用这种弹性布局方式，元素的宽度会自动随着浏览器窗口宽度的改变而自动调整，不需要考虑浏览器窗口的具体宽度有多大。
2引入媒体查询媒体查询是响应式web设计的核心，它可以根据移动设备的分辨率大小自动调整相应的样式。从CSS2开始，就可以在CSS中通过设置媒体类型获得媒体支持。为了适应屏幕，大多数移动设备浏览器会把网页缩放到设备屏幕的宽度，当缩小比例较大时，会导致浏览者看不清楚页面的内容，浏览内容不方便。我们可以首先使用meta标签的viewport属性来设置，让网页宽度默认等于屏幕宽度。在质量工程管理系统页面的<head>标签中添加这个<meta>标签的内容，代码如下。上面的代码是强制设置网页在移动设备上的显示宽度等于设备宽度，按照原始网页缩放比例（initial-scale=1.0）1.0显示网页。这样，支持viewport属性的浏览器就会按照原始网页的实际宽度去显示网页内容了。接下来，在上述设置了viewport属性的基础上，引入媒体查询来设置网页在不同的分辨率大小的设备上自动调用相应的CSS样式进行显示。媒体查询被用来检查对于所有宽度大于1024px分辨率的移动设备来说，系统页面内容的宽度会被固定为980px。如果viewport小于980px，页面布局会以弹性布局来显示。如果viewport小于640px，页面内容将会把左侧边栏区和右侧正文区展开为整体宽度，形成一个单栏布局。页面具体应用的媒体查询代码如下所示。
2导航栏设计由于移动设备屏幕大小的限制，质量工程管理系统在移动设备上显示时，导航栏目会重叠显示，使页面看起来杂乱不堪。针对此问题，作者特意对导航栏重新设计，对于小屏幕的移动设备，利用js技术在最初时隐藏导航栏目，只为用户提供一个按钮，用户点击时，就会显示完整导航栏。这样做不仅使页面看起来整洁美观，节省了屏幕空间，用户还可以按需索取想要了解的内容。在以后扩展系统功能增加更多导航条目时，也无需考虑屏幕尺寸问题所带来的影响。
三、系统测试
在系统开发过程中，每一个阶段都应该在多种浏览器和不同类型移动设备屏幕中进行测试，以便尽早发现和解决问题。质量工程管理系统在开发过程中，在多种移动设备上也经过不断的测试和完善，最终效果如图1所示。
四、结语
本文以实际项目为背景，讲述了如何使用响应式web设计技术为移动设备访问质量工程管理系统提供解决方案。相对于传统web开发，响应式web设计技术可以给移动设备用户提供更好的用户体验。也很大程度上避免了因访问设备的分辨率不同而进行的重复开发，节省了人力物力，提高了开发效率。
作者：赵卫东单位：滁州职业技术学院
- 上一篇：课程建设质量工程论文范文
- 下一篇：目标管理质量工程论文范文