葛勇平

一、自适应网页设计技术应用的背景与环境

1.精品课程开发的背景需要

为了引领学校的教学改革，促进学校整体教学水平和培养质量的提高，许多职业学校都开始积极开展并强力推进精品专业与精品课程的建设与开发。本着精品课程聚集优质教育资源，提高课程教学质量，并在更大范围内进行课程分享的宗旨，同时为了实现有效提高教学信息化的目的，开发精品课程网站成为必需。

2.移动互联网发展的环境需要

《中国移动互联网行业市场前瞻与投资战略规划分析报告》的数据统计结果表明，随着诸如智能手机、平板电脑等智能终端价格的不断下探，WiFi网络的广泛覆盖，4G网络的不断普及，移动网民呈现爆发增长的趋势，校园里的年轻学子更是移动互联网的主力军。如此，在精品课程网站设计开发的过程中考虑学生在移动端访问时的运行效果，就成为了不可阻挡的趋势。因此在课程网站的开发过程中，不得不应用自适应网页设计技术。

二、自适应网页设计概述

1.自适应网页设计的概念

自适应网页设计，也称作“响应式Web设计”。这个理念的核心是无论用户使用的是笔记本、平板，还是各种类型的智能手机，设计的网页都能够自动识别各种设备的屏幕尺寸，并自动切换显示分辨率，图片的尺寸以及相关脚本功能等，使得网页自动适应设备环境，在设备上呈现最优化显示。

2.自适应网页设计的基本原理

自适应网页设计之所以能够针对不同设备、不同尺寸的屏幕进行自适应，其原理就是针对不同分辨率的屏幕设计CSS规则，在加载网页前先检测设备屏幕分辨率，并选择合适的CSS规则渲染网页。

在自适应网页设计中，需要在加载网页前对设备屏幕分辨率进行检测，这个就需要运用到媒体查询技术。媒体查询是CSS3中新增的功能，媒体查询让CSS可以更精确作用于不同的媒体类型和同一媒体的不同条件。

通过媒体查询判断出用户设备的分辨率后，需要调用相应的CSS样式渲染网页，在具体的CSS样式设计中通常使用流动布局的方式。流动布局使用百分比来确定每个部分在屏幕上的相对宽度，由此就能够轻松地实现自适应用户设备的分辨率。

三、自适应网页设计技术应用实践

1.跨终端自适应应用实践

（1）Meta viewport标签的使用。

在网页的部分添加meta标签，示例代码：

，其中viewport是网页默认宽度与高度，content中设置将默认宽度调整为屏幕宽度，并将原始缩放比例（initial-scale）设置为1，即网页初始大小占屏幕的百分之百。

（2）Media query的使用。

通过媒体查询自动探测屏幕宽度，然后加载相应的CSS文件。示例代码：

。

通过媒体查询，如果检测的屏幕宽度小于320像素，那么将加载smallScreen.css样式来渲染网页。

（3）CSS设计与引用。

针对不同的设备分辨率，设计并引用相应的CSS样式，示例代码：

@media screen and（max-device-width：320px）{...}

在CSS样式文件中引用@media，并针对该分辨率下设计相关样式。

2.图片的自适应应用实践

在精品课程网站建设中，为了使图片支持移动端设备，也采用了自适应设计。相关技术处理示例：

img { max-width：100%;}

这里使用了浮动布局的设计理念，使用百分比设置，能够按照比例进行自动缩放。

3.微课视频的自适应应用实践

（1）视频尺寸适应问题的处理。

对于这个问题，类似于图片处理的方式，通过流动布局方式，限定对象的最大宽度为100%来实现自适应宽度的问题。

（2）视频格式适应问题的处理。

对于不同的终端对于视频格式的支持不同的问题，应用Html5中的video标签来解决。该标签支持同时链接ogg，mpeg4，webm三种格式的视频文件，而无论是苹果还是安卓还是windows系统的主流浏览器均至少支持其中一种视频格式，这样对于视频格式的自适应问题就迎刃而解。

以上对于在中职精品课程网站建设中的自适应网页设计进行了初步的探讨和应用。本文仅仅起到一个抛砖引玉的作用，希望将更多的移动互联网相关的技术应用到教育教学中，开启教育移动互联的新时代。

参考文献：

[1]（英）Ben Frain.响应式Web设计：HTML5和CSS3实战[M].王永强译.北京：人民邮电出版社，2013.

[2]梁婷婷，邓广彪.通用的精品课程网站的设计与开发[J].计算机时代，2009（06）.endprint