2024年3月15日发(作者：潜温书)
基于Media Queries的精品课程网站重构研究
摘 要：精品课程是网络教学资源的重要组成部分，而构建适合于智
能移动客户端访问的精品课程资源不仅是对现有精品课程的提升与
扩展，同时也是MLearning的理念之体现。针对现有精品课程网站是
重新建设还是进行重构这个问题，提出了一个重构原则。并对重构原
理及技术实现进行了详细分析，提出采用Media Queries来实现。
关键词：移动Web；自适应网页设计；HTML5；精品课程
0 引言
2003年，教育部正式启动了“高等学校教学质量与教学改革工
程精品课程建设项目”。据教育部相关文件介绍，国家精品课程是具
有一流教师队伍、一流教学内容、一流教学方法、一流教材、一流教
学管理等特点的示范性课程。精品课程的特点是先进性、互动性、整
体性、开放性和示范性。在此背景下，目前已形成国家级精品课程，
省、市级精品课程和校级精品课程这样的三级精品课程体系。随着智
能移动客户端的普及，使用者也越来越多，移动版的精品课程网站随
之也越来越重要。并且移动设备在尺寸及屏幕分辨率上存在差异，不
可能专门为iPhone/iPad、Adnriod、BlackBerry单独开发页面。精品
课程网站要能适应多种设备的访问要求并且兼容所有的屏幕分辨率。
1 重构的必要性
1.1 精品课程内容类型
根据“教育部关于国家精品开放课程建设的实施意见”要求，可
将精品课程分为：精品视频公开课与精品资源共享课。精品视频公开
课主要包括以声音和画面为主的视听媒介；精品资源共享课主要包括
全程教学录像、演示文稿、试题库、素材库等课程资源的网络共享。
要想这些资源在不同设备上得到支持，需要对不同智能客户端的OS
版本进行详细比较与分析。表1中列举了不同OS浏览器对HTML5
中多媒体的支持情况。
1.2 移动Web与桌面Web
从根本上说，只存在一种Web。早期以及现有绝大多数精品课程
网站都是通过各种Web浏览器（IE、Firefox、Chrome等）向服务器
发出请求，服务器接受并响应这些请求，我们将这种方式称为桌面
Web。移动Web在桌面Web的基础上添加了新的MIME类型、标记、
文档格式，专门用于解决移动设备上的资源限制、浏览器差异等问题。
尤其是跨平台的HTML5应用将对移动互联网的发展起到巨大的推动
作用。移动Web与桌面Web之间的差异如表2所示。
Chrome等）向服务器发出请求，服务器接受并响应这些请求，
我们将这种方式称为桌面Web。移动Web在桌面Web的基础上添加
了新的MIME类型、标记、文档格式，专门用于解决移动设备上的
资源限制、浏览器差异等问题。尤其是跨平台的HTML5应用将对移
动互联网的发展起到巨大的推动作用。移动Web与桌面Web之间的
差异如表2所示。
“”这个样式文件中定义了media类型的样式，代码如
下：
@media screen and （maxwidth： 480px） {
.demotag {
„ „
}
}
当前移动设备旋转后，处于纵向（portrait）模式和横向（landscape）
模式状态下的代码如下：
2.3 设备识别
在对精品课程网站进行内容自适应设计后，最后一步就是对访问
的客户端设备进行识别。设备识别可以通过检测UserAgent和HTTP
请求，以识别来自移动设备的Web流量，并提供相关设备的特征信
息。开发人员可以使用设备数据库和随附的API来识别发出Web请
求的设备。一旦识别出相应的设备，设备数据库即会提供有关移动设
备及其浏览器的详细属性。
例如，iPhone手机的请求，通过后续的UserAgent请求报头值传
递到设备数据库API：
Mozilla/5.0 （iPhone； U； CPU iPhone OS 4_3_2 like Mac OS X；
zh-cn）
AppleWebKit/533.17.9 （KHTML， like Gecko） Version/5.0.2
Mobile/8H7 Safari/6533.18.5
设备数据库会将上述Web客户端识别为运行4.3.2版本操作系统
并使用Safari Web浏览器的Apple iPhone。识别出设备后，便可以使
用API了解更多设备信息。
Adriod手机的UserAgent请求报头如下：
Mozilla/5.0 （Linux； U； Android 2.3.3； zh-cn；
HTC_DesireS_S510e Build/GRI40）
AppleWebKit/533.1 （KHTML， like Gecko） Version/4.0 Mobile
Safari/533.1
Nokia手机的UserAgent请求报头如下：
Mozilla/5.0 （SymbianOS/9.3； U； Series60/3.2 NokiaE75-1
/110.48.125 Profile/MIDP-2.1 Configuration/CLDC-1.1 ）
AppleWebKit/413 （KHTML， like Gecko） Safari/413
3 重构的实现
3.1 HTML5
随着HTML5标准的公布，已有越来越多的站点开始使用HTML5
作为开发语言，其目标是取代1999年所制定的HTML 4.01和XHTML
1.0 标准，使网络标准达到符合当下的网络需求。广义论及HTML5
时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。
它希望能够减少浏览器对基于插件的富客户端网络应用（pluginbased
rich internet application，RIA）的依赖，如Adobe Flash、Microsoft
Silverlight与Oracle JavaFX，并且提供更多能有效增强网络应用的标
准集。3.2 音视频技术
精品课程网站具有多种资源类型，其中的音频资源和视频资源是
非常重要的资源之一，这其中不仅包括课程录像，还有教学视频、动
画演示等。由于这些音视频资源的压缩编码技术标准不同，从而导致
对其播放需要安装相应的插件。而安装插件对于桌面Web来讲是相
对容易的，但对于移动客户端来讲则会受到平台的限制。
HTML5标准中的多媒体相关标准，恰好弥补了客户端需要安装
Flash插件才能播放音视频的问题。通过Video和Audio标记，仅需
为数不多的代码便能实现音视频文件的播放。但不幸的是，HTML5
对音视频媒体在跨浏览器支持上存在差异，即并不是所有的浏览器都
支持MP4视频格式与MP3音频格式。这些来自于不同浏览器之间音
视频解码方式的差异，导致使用 HTML5 媒体发展所面临的第一个
问题就是对视频和音讯编码译码器的不一致支持。HTML5中使用音
频和视频文件的代码如下：
autoplay属性用于设置视频是否自动播放，是一个布尔值属性。
controls属性用于向浏览器指明页面制作者没有使用脚本生成播放控
制器，需要浏览器启用本身的播放控制条。控制条包括播放暂停控制、
播放进度控制、音量控制和全屏。
3.3 开发框架
因为有了HTML5的支持，越来越多的Web开发者能够使用开发
框架进行Web开发。传统的Web开发模式，就是在现有Web网站基
础上，根据移动设备平台的特点生成相应移动版本的Web站点。对
于精品课程网站开发来讲，往往是多种开发语言相结合，如HTML、
CSS、JavaScript等。为了提高开发效率，则可以采用现有的一些成
型的开发框架进行开发。目前，比较流行的有3种开发框架：如基于
jQuery页面驱动的jQuery Mobile、基于ExtJS架构的Sencha Touch，
以及能打通Web与Native两者之间鸿沟的PhoneGap框架 。
第一，jQuery Mobile框架。jQuery Mobile是jQuery在移动平台
上的版本，它提供移动平台同一接口工具。jQuery Mobile基于jQuery、
HTML5和CSS3构建，以“Write less， Do More”为目标，为所有
主流移动操作系统平台提供高度统一的解码框架，开发人员不需要为
每种移动平台编写单独的应用程序。jQuery Mobile支持iOS、Android、
BlackBerry、Windwos Phone、Palm Web OS等。
第二，Sencha Touch框架。该框架基于HTML5和CSS3构建，
完全兼容iOS和Android平台，而且其UI风格非常接近由iOS和
Android开发的Native App。
第三，PhoneGap框架。PhoneGap是一款基于HTML5的跨平台
移动Web开发框架，它允许用户通过Web技术访问移动设备的本地
应用、API接口及应用程序库等。开发者只要会写HTML和JavaScript
代码，就可以利用PhoneGap提供的API去调用移动设备内置的各种
功能。
3.4 重构编码实现——以《传播学》精品课程为例
（1）系统架构。精品课程网站内容结构应根据国家精品课程评
审指标体系进行设置，并可根据需要进行更新。为了体现精品课程网
站的特色，网站应该具有个性化设置功能。系统基于B/S模式构建，
采用三层架构体系，即用户界面层、业务逻辑层和数据访问层。系统
的开发采用MVC设计模式，其中业务逻辑层的功能较多，又细分为
面向用户界面和面向问题域两个子层。
（2）编码实现。本研究基于HTML5和CSS3开发《传播学》精
品课程原型网站，如图3所示。并将Meia Queries 中的最大宽度设
置为320px，这样可以满足大多数智能客户端的屏幕分辨率。使用
Adnriod模拟器访问的主页效果如图4所示，可以看出Meia Queries
已经生效，页面内容已进行适应性调整。而将客户端分辨率设置为
160px的效果如图5所示。
Media Queries技术在原有站点的基础上，构建适合于智能移动
客户端设备访问的精品课程网站。并且，使用Adnriod模拟器对重构
后的《传播学》精品课程网站进行测试。结果发现，对文字、图片的
适应性功能运行良好，但对音视频等多媒体资源的访问存在编码差
异。这是由于Media Queries技术使用的是HTML5和CSS3标准，而
各智能移动设备厂商对于HTML5标准中的多媒体音视频编码标准的
支持存在差异。
参考文献：
[1] 教育部高教司.教育部关于启动高等学校教学质量和教学改
革工程精品课程建设工作的通知[EB/OL]. .
[2] 教育部高教司.教育部关于国家精品开放课程建设的实施意
见[EB/OL]. .
[3] Trying to understand HTML5 compatibility on mobile and tablet
browsers[EB/OL]. < http：///>
[4] （美）费雷德里克.杨小冬，译.智能手机Web标准开发实战
[M].北京：清华大学出版社，2010.
[5] 阮一峰.自适应网页设计（Responsive Web Design）[EB/OL].
[6] 唐俊开.HTML5移动Web开发指南[M].北京：电子工业出版
社，2012.
2024年3月15日发(作者：潜温书)
基于Media Queries的精品课程网站重构研究
摘 要：精品课程是网络教学资源的重要组成部分，而构建适合于智
能移动客户端访问的精品课程资源不仅是对现有精品课程的提升与
扩展，同时也是MLearning的理念之体现。针对现有精品课程网站是
重新建设还是进行重构这个问题，提出了一个重构原则。并对重构原
理及技术实现进行了详细分析，提出采用Media Queries来实现。
关键词：移动Web；自适应网页设计；HTML5；精品课程
0 引言
2003年，教育部正式启动了“高等学校教学质量与教学改革工
程精品课程建设项目”。据教育部相关文件介绍，国家精品课程是具
有一流教师队伍、一流教学内容、一流教学方法、一流教材、一流教
学管理等特点的示范性课程。精品课程的特点是先进性、互动性、整
体性、开放性和示范性。在此背景下，目前已形成国家级精品课程，
省、市级精品课程和校级精品课程这样的三级精品课程体系。随着智
能移动客户端的普及，使用者也越来越多，移动版的精品课程网站随
之也越来越重要。并且移动设备在尺寸及屏幕分辨率上存在差异，不
可能专门为iPhone/iPad、Adnriod、BlackBerry单独开发页面。精品
课程网站要能适应多种设备的访问要求并且兼容所有的屏幕分辨率。
1 重构的必要性
1.1 精品课程内容类型
根据“教育部关于国家精品开放课程建设的实施意见”要求，可
将精品课程分为：精品视频公开课与精品资源共享课。精品视频公开
课主要包括以声音和画面为主的视听媒介；精品资源共享课主要包括
全程教学录像、演示文稿、试题库、素材库等课程资源的网络共享。
要想这些资源在不同设备上得到支持，需要对不同智能客户端的OS
版本进行详细比较与分析。表1中列举了不同OS浏览器对HTML5
中多媒体的支持情况。
1.2 移动Web与桌面Web
从根本上说，只存在一种Web。早期以及现有绝大多数精品课程
网站都是通过各种Web浏览器（IE、Firefox、Chrome等）向服务器
发出请求，服务器接受并响应这些请求，我们将这种方式称为桌面
Web。移动Web在桌面Web的基础上添加了新的MIME类型、标记、
文档格式，专门用于解决移动设备上的资源限制、浏览器差异等问题。
尤其是跨平台的HTML5应用将对移动互联网的发展起到巨大的推动
作用。移动Web与桌面Web之间的差异如表2所示。
Chrome等）向服务器发出请求，服务器接受并响应这些请求，
我们将这种方式称为桌面Web。移动Web在桌面Web的基础上添加
了新的MIME类型、标记、文档格式，专门用于解决移动设备上的
资源限制、浏览器差异等问题。尤其是跨平台的HTML5应用将对移
动互联网的发展起到巨大的推动作用。移动Web与桌面Web之间的
差异如表2所示。
“”这个样式文件中定义了media类型的样式，代码如
下：
@media screen and （maxwidth： 480px） {
.demotag {
„ „
}
}
当前移动设备旋转后，处于纵向（portrait）模式和横向（landscape）
模式状态下的代码如下：
2.3 设备识别
在对精品课程网站进行内容自适应设计后，最后一步就是对访问
的客户端设备进行识别。设备识别可以通过检测UserAgent和HTTP
请求，以识别来自移动设备的Web流量，并提供相关设备的特征信
息。开发人员可以使用设备数据库和随附的API来识别发出Web请
求的设备。一旦识别出相应的设备，设备数据库即会提供有关移动设
备及其浏览器的详细属性。
例如，iPhone手机的请求，通过后续的UserAgent请求报头值传
递到设备数据库API：
Mozilla/5.0 （iPhone； U； CPU iPhone OS 4_3_2 like Mac OS X；
zh-cn）
AppleWebKit/533.17.9 （KHTML， like Gecko） Version/5.0.2
Mobile/8H7 Safari/6533.18.5
设备数据库会将上述Web客户端识别为运行4.3.2版本操作系统
并使用Safari Web浏览器的Apple iPhone。识别出设备后，便可以使
用API了解更多设备信息。
Adriod手机的UserAgent请求报头如下：
Mozilla/5.0 （Linux； U； Android 2.3.3； zh-cn；
HTC_DesireS_S510e Build/GRI40）
AppleWebKit/533.1 （KHTML， like Gecko） Version/4.0 Mobile
Safari/533.1
Nokia手机的UserAgent请求报头如下：
Mozilla/5.0 （SymbianOS/9.3； U； Series60/3.2 NokiaE75-1
/110.48.125 Profile/MIDP-2.1 Configuration/CLDC-1.1 ）
AppleWebKit/413 （KHTML， like Gecko） Safari/413
3 重构的实现
3.1 HTML5
随着HTML5标准的公布，已有越来越多的站点开始使用HTML5
作为开发语言，其目标是取代1999年所制定的HTML 4.01和XHTML
1.0 标准，使网络标准达到符合当下的网络需求。广义论及HTML5
时，实际指的是包括HTML、CSS和JavaScript在内的一套技术组合。
它希望能够减少浏览器对基于插件的富客户端网络应用（pluginbased
rich internet application，RIA）的依赖，如Adobe Flash、Microsoft
Silverlight与Oracle JavaFX，并且提供更多能有效增强网络应用的标
准集。3.2 音视频技术
精品课程网站具有多种资源类型，其中的音频资源和视频资源是
非常重要的资源之一，这其中不仅包括课程录像，还有教学视频、动
画演示等。由于这些音视频资源的压缩编码技术标准不同，从而导致
对其播放需要安装相应的插件。而安装插件对于桌面Web来讲是相
对容易的，但对于移动客户端来讲则会受到平台的限制。
HTML5标准中的多媒体相关标准，恰好弥补了客户端需要安装
Flash插件才能播放音视频的问题。通过Video和Audio标记，仅需
为数不多的代码便能实现音视频文件的播放。但不幸的是，HTML5
对音视频媒体在跨浏览器支持上存在差异，即并不是所有的浏览器都
支持MP4视频格式与MP3音频格式。这些来自于不同浏览器之间音
视频解码方式的差异，导致使用 HTML5 媒体发展所面临的第一个
问题就是对视频和音讯编码译码器的不一致支持。HTML5中使用音
频和视频文件的代码如下：
autoplay属性用于设置视频是否自动播放，是一个布尔值属性。
controls属性用于向浏览器指明页面制作者没有使用脚本生成播放控
制器，需要浏览器启用本身的播放控制条。控制条包括播放暂停控制、
播放进度控制、音量控制和全屏。
3.3 开发框架
因为有了HTML5的支持，越来越多的Web开发者能够使用开发
框架进行Web开发。传统的Web开发模式，就是在现有Web网站基
础上，根据移动设备平台的特点生成相应移动版本的Web站点。对
于精品课程网站开发来讲，往往是多种开发语言相结合，如HTML、
CSS、JavaScript等。为了提高开发效率，则可以采用现有的一些成
型的开发框架进行开发。目前，比较流行的有3种开发框架：如基于
jQuery页面驱动的jQuery Mobile、基于ExtJS架构的Sencha Touch，
以及能打通Web与Native两者之间鸿沟的PhoneGap框架 。
第一，jQuery Mobile框架。jQuery Mobile是jQuery在移动平台
上的版本，它提供移动平台同一接口工具。jQuery Mobile基于jQuery、
HTML5和CSS3构建，以“Write less， Do More”为目标，为所有
主流移动操作系统平台提供高度统一的解码框架，开发人员不需要为
每种移动平台编写单独的应用程序。jQuery Mobile支持iOS、Android、
BlackBerry、Windwos Phone、Palm Web OS等。
第二，Sencha Touch框架。该框架基于HTML5和CSS3构建，
完全兼容iOS和Android平台，而且其UI风格非常接近由iOS和
Android开发的Native App。
第三，PhoneGap框架。PhoneGap是一款基于HTML5的跨平台
移动Web开发框架，它允许用户通过Web技术访问移动设备的本地
应用、API接口及应用程序库等。开发者只要会写HTML和JavaScript
代码，就可以利用PhoneGap提供的API去调用移动设备内置的各种
功能。
3.4 重构编码实现——以《传播学》精品课程为例
（1）系统架构。精品课程网站内容结构应根据国家精品课程评
审指标体系进行设置，并可根据需要进行更新。为了体现精品课程网
站的特色，网站应该具有个性化设置功能。系统基于B/S模式构建，
采用三层架构体系，即用户界面层、业务逻辑层和数据访问层。系统
的开发采用MVC设计模式，其中业务逻辑层的功能较多，又细分为
面向用户界面和面向问题域两个子层。
（2）编码实现。本研究基于HTML5和CSS3开发《传播学》精
品课程原型网站，如图3所示。并将Meia Queries 中的最大宽度设
置为320px，这样可以满足大多数智能客户端的屏幕分辨率。使用
Adnriod模拟器访问的主页效果如图4所示，可以看出Meia Queries
已经生效，页面内容已进行适应性调整。而将客户端分辨率设置为
160px的效果如图5所示。
Media Queries技术在原有站点的基础上，构建适合于智能移动
客户端设备访问的精品课程网站。并且，使用Adnriod模拟器对重构
后的《传播学》精品课程网站进行测试。结果发现，对文字、图片的
适应性功能运行良好，但对音视频等多媒体资源的访问存在编码差
异。这是由于Media Queries技术使用的是HTML5和CSS3标准，而
各智能移动设备厂商对于HTML5标准中的多媒体音视频编码标准的
支持存在差异。
参考文献：
[1] 教育部高教司.教育部关于启动高等学校教学质量和教学改
革工程精品课程建设工作的通知[EB/OL]. .
[2] 教育部高教司.教育部关于国家精品开放课程建设的实施意
见[EB/OL]. .
[3] Trying to understand HTML5 compatibility on mobile and tablet
browsers[EB/OL]. < http：///>
[4] （美）费雷德里克.杨小冬，译.智能手机Web标准开发实战
[M].北京：清华大学出版社，2010.
[5] 阮一峰.自适应网页设计（Responsive Web Design）[EB/OL].
[6] 唐俊开.HTML5移动Web开发指南[M].北京：电子工业出版
社，2012.