摘 要：随着计算机网络技术的高速发展，各种智能移动设备在大学生中迅速普及，越来越多的大学生在生活和学习中习惯使用移动设备来访问各种网站。本文提出建设响应式的移动实训互动平台，为师生使用移动设备访问此实训互动平台提供解决方法，便于教师和学生就实训过程中的问题随时随地进行沟通和互动，实现职业院校实训教学的信息化、科学化和智能化。

关键词：移动设备；响应式Web设计；媒体查询；弹性布局

中图分类号：TP393.09 文献标识码：A 文章编号：2096-4706（2018）04-0105-02

Abstract：With the rapid development of computer network technology，all kinds of intelligent mobile devices are widely popularized among college students. More and more college students use mobile devices to visit various websites for life and study. This paper proposes building a responsive mobile training interactive platform，which provides a solution for teachers and students to use mobile devices to access this platform. It is convenient for teachers and students to communicate and interact at any time and anywhere in the training process，to realize the informalization，scientification and intelligence of the training teaching in vocational colleges.

Keywords：mobile devices；responsive Web design；media query；flexible box

0 引 言

实训教学是高等职业院校技能型人才培养的重要手段，是提高人才培养质量的关键。早在2006年，《教育部关于职业院校试行工学结合、半工半读的意见》就出台了，开始在职业院校中大力推行工学结合、校企合作的人才培养模式。随后，很多高职院校带头进行了一些有益的尝试，但在实际操作过程中遇到诸多问题，并没有把工学结合和校企合作落到实处。因此，利用计算机软件技术构建一种基于B/S模式的移动实训互动平台，侧重实训过程中师生的互动性和教学的生动性，对于改变传统实训教学模式具有重要的探索意义。

1 移动实训互动平台发展现状

国外发达国家职业院校的实训教学大多与理论教学融为一体，一般采取“教学做一体”的教学模式，实训互动平台是教学管理系统的重要组成部分[1]。国内高职院校当前的教学管理系统主要用于完成日常教务管理工作，实训教學管理还存在管理不到位、没有互动元素、缺少企业参与等问题，实训教学管理严重滞后于人才培养需要。

近年来，随着我国经济的腾飞和移动互联网技术的快速发展，移动互联网用户数一直保持着快速增长的态势。截至2017年11月，我国已有超过12.5亿移动互联网用户，移动用户规模早已超过了PC用户。在校高职学生几乎人手一部智能手机或者其他移动设备。因此，当前构建适应我国高职院校教学管理需要的移动实训互动平台，不仅能利用学生手中的智能设备开展实训教学，更能推动高等职业院校实训教学工作的发展。

2 响应式Web设计简介

2.1 响应式Web设计的概念

美国网页设计师伊桑·马科特（Ethan Marcotte）在2010年提出了“响应式Web设计”的概念，响应式Web设计是指随着访问设备的变化和用户行为的改变，页面的显示将自动进行响应和调整。无论使用哪种设备（手机、iPad和笔记本）访问响应式网页，页面都能够自动调整布局、改变图片尺寸以适应不同大小的设备。采用响应式Web设计技术制作的网站，网页将能够在各种移动设备上完美显示[2]。

2.2 响应式Web设计的关键技术

响应式Web设计整合了媒体查询、弹性布局、弹性图片/媒体三种已有技术[3]。其中，媒体查询负责按移动设备类型来调整网页布局，弹性布局和弹性图片/媒体控制视觉元素的自适应显示。

媒体查询技术是制作响应式网页的关键，使用媒体查询可以针对不同屏幕尺寸的设备定义不同的样式。在媒体查询中可以添加零个或多个表达式，这些表达式描述了媒体特征，如果媒体查询中指定的媒体类型和显示文档所使用的设备类型一致，并且所有表达式的值都是true，那么该媒体查询的结果就为true，将执行媒体查询中的相应代码。

从2015年开始，CSS推出了一个叫“弹性盒子”（Flexbox）的布局模块。使用它可以实现无数种可能的布局，这种布局机制非常适合响应式设计，也就是我们常说的弹性布局。

弹性图片/媒体包括文字、图片、视频、动画等可视媒体，要实现响应式网页效果，需要对各种视觉媒体进行弹性化处理[4]。网页中的图片大多是使用Photoshop、Fireworks等图形处理软件制作处理的，以固定宽度来衡量大小。响应式Web必须使图片也是响应式的，这就需要我们将传统固定像素大小的图片转换为按比例大小来显示。

3 响应式Web设计在移动实训互动平台中的应用

3.1 前期分析

本文以高职院校实训教学的管理现状和需要为背景，拟构建基于响应式Web设计的移动实训互动平台，实现职业院校实训教学工作的信息化、科学化和智能化。满足教师指导学生实训的需要，对学生实训过程中的问题随时进行沟通、交流、互动和指导。

由于本实训互动平台的主要用户为校内师生，因此，项目开发初期，采用调查问卷的方式对用户进行了需求分析和调研。大致了解了师生访问此平台所使用的移动设备类型分布及存在的主要问题，确定了实训互动平台的功能性需求和非功能性需求。设计出实训互动平台几种典型的响应规格，以便在不同移动设备上都能很好地展示网页内容。

3.2 响应式Web设计在移动实训互动平台中的应用

3.2.1 设置Viewport

大多数移动浏览器默认情况下会自动将HTML页面放大为宽的视图以符合屏幕分辨率。因此，进行响应式Web设计之前，首先需要在页面

上面的代碼中，width=device-width表示网页的宽度就是设备屏幕的宽度，initial-scale=1.0表示设置页面的缩放比为1，不让页面进行缩放。

3.2.2 制定媒体查询规则

响应式Web设计的核心内容是媒体查询，媒体查询表达式由设备类型和一个或多个检测媒体特性的声明构成，声明由媒体特性名称和值构成，中间用冒号“：”分隔[5]。它根据设置的条件通知浏览器如何来渲染页面。本文中的移动实训互动平台中，按照用户访问的设备类型，把移动设备按宽度大致分为三种类型：超小屏幕设备（手机等，宽度小于768px）、小屏幕设备（平板等，宽度大于等于768px）和大屏幕设备（PC机等，宽度大于992px）。代码如下：

@media screen and （max-width：768px）{/*超小屏幕设备（手机等，宽度小于768px）*/}

@media screen and （min-width：768px）and（max-width：992px）{/*小屏幕设备（平板等，宽度大于等于768px）*/}

@media screen and （min-width：992px）{/*大屏幕设备（PC机等，宽度大于992px）*/}

3.2.3 设置弹性布局和弹性图片/媒体

为了使页面和视觉媒体能够进行弹性布局，在编写CSS样式时一般不使用绝对宽度值和字体大小，定义宽和高的时候不使用像素（width：px）单位，只使用百分比（width：%）或者（width：auto）定义高和宽。定义字体大小也使用相对单位（em），不使用像素（px）。

为了使图片在访问设备中能够响应式地显示，设置页面所有图片的CSS代码如下：img {width：100%；max-width：100%；height：auto；}

4 结 论

如今，人们在工作和学习中对移动设备的使用越来越频繁。如何使用响应式Web设计方法建立网站或系统，使其在多种移动设备中均能很好地呈现，对于开发者来说是很迫切的考验[6]。本文以实际项目为背景，论述了响应式Web设计在实训互动平台中的具体应用，为移动平台响应式网站开发提供了可行的解决方案，节省了开发成本和时间，改善了用户体验。相信在不久的将来，在各种类型的应用中，响应式Web设计会越来越普遍，越来越受欢迎。

参考文献：

[1] 叶小琴.教学管理信息化建设的探索与实践 [J].教学与管理.2013（24）：28-30.

[2] John Allsopp.Web标准开发之道 [M].雷钧钧，常可，等，译.北京：机械工业出版社，2011.

[3] 邢希，田兴彦，王世运.响应式Web设计方法的研究 [J].琼州学院学报，2013，20（2）：36-38.

[4] 冯春英.基于响应式Web设计的新型图书馆门户网站构建 [J].图书馆学研究，2015（15）：34-40.

[5] Ethan Marcotte .Responsive Web Design [EB/OL]. http：//alistapart.com/article/responsive-web-design，2010-05-25.

[6] 张幸芝，徐东东，贾菲.基于响应式Web设计的教务系统移动平台研究与建设 [J].软件，2013，34（6）：5-7.

作者简介：赵卫东（1979.12-），男，安徽无为人，讲师，硕士。研究方向：计算机应用、软件工程等。