【摘 要】随着移动技术和智能终端的飞速发展，越来越多的人倾向于使用移动终端来进行移动学习。但由于设备的差异性，传统基于web的移动学习网站，无法满足用户体验。使用响应式布局能够最大限度的适应各种移动终端，对移动学习网站开发是个很好的选择。
　　【关键字】移动学习 响应式布局 网站
　　《国家中长期教育改革和发展规划纲要（2010—2020年）》中指出：到2020年，基本实现教育现代化，基本形成学习型社会，构建灵活开放的终身教育体系，同时也指出，要加强优质教育资源开发与应用，大力发展现代远程教育，为学习者提供方便、灵活、个性化的学习条件。随着无线网络、移动技术和智能终端的飞速发展，移动学习在教育领域应运而生，为人们提供了一种新的学习模式，如同移动支付、移动金融一样改变着我们的生活。移动学习（Mobile Learning）打破了地域界限、整合了优质教育资源、让任何人在任何时间和地点进行个性化学习，并能提供教师与学习者之间的双向交流。移动学习具备便捷性、移动性、交互性等特点，它被认为是未来的一种学习模式。
　　截至2014年6月，我国手机网民达5.27亿，手机网民规模首次超越传统PC网民规模。越来越多的人喜欢使用手机、平板等移动终端来获取信息和进行移动学习。然而由于设备差异性，传统Web学习网站无法根据不同屏幕自适应调整页面布局，因此无法满足移动学习者的体验和需求。那么如何让这些Web学习资源自适应各种移动终端，以提供良好的用户体验呢？可以通过两种方式来解决这个问题：一是开发移动原生应用（native app） ，即手机客户端。它虽然支持更好的用户体验，但是开发成本较高，需要根据不同屏幕和系统以及开发多种版本，维护升级过程繁琐，如发布一个APP，需要通过Apple Store严格审核，周期较长。二是开发移动Web应用（web app），即借助HTML5、CSS3等技术，通过响应式Web设计，开发适应各种屏幕的Web应用。其优点是兼容各种手机平台、开发成本低、易维护更新，其缺点是要求联网、对手机特有功能（如GPS、摄像头）有限制等。由于Web应用跨平台性、只需一个浏览器就能访问到最新的应用、不用考虑频繁的更新升级等特性深受用户好评。正如乔布斯所言，原生应用给了用户更好的体验，但Web才是未来。
　　一、何为响应式布局
　　响应式布局是Ethan Marcotte在2010年提出的一个概念，指的是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。其设计理念是：页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。其实现技术包括弹性布局、Media Query等。
　　响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前移动设备屏幕的尺寸多样化，以及移动系统不兼容，基于响应式布局的web应用将是大势所趋。因此，对于移动学习网站开发而言，要遵循移动优先理念、借助响应式布局、使页面实现不同设备、不同屏幕之间的自适应调整。这样有利于减少开发成本，整合各方资源，实现全网无缝对接。
　　二、如何创建响应式网站
　　目前，可以通过两种方式进行响应式网站的设计，分别是基于CSS3的Media Query技术和基于第三方前端开发框架技术，如ivory、KickStart、Gumby、Bootstrap等，其中以Bootstrap最为流行。
　　（一）Media Query技术
　　通过CSS3中的Media Query（媒介查询）技术可以非常方便的做出適用各种类型终端的界面。Media Query通过不同的媒体类型和同一媒体类型的不同条件来定义样式表规则。页面中引入媒体类型方法也有多种：可直接在页面中通过link、@import方法引入；也可以在样式文件中使用@media引入。如为设备屏幕宽度像素小于等于480px设置特有样式，代码如下： @media only screen and（max-device-width：480px） {//style rules}。其中，screen表示媒体类型为屏幕，max-device-width表示设备屏幕的最大宽度。另外，也可通过min-width、max-width的设置，定义渲染界面宽度高于或低于某个值的情况下，为页面指定特定的样式表；还可通过设置orientation属性控制横屏或竖屏。为了保证页面样式在高效响应屏幕尺寸的调整，可将多个media Query直接写在一个样式表中。当然，若从样式表结构和维护的角度出发，也可使用多个样式表的方式来实现Media Query，如下所示：
　　//当渲染界面宽度小于等于970px时，采用small.css样式来渲染页面
　　//当渲染界面宽度介于970px和1024px之间时，采用large.css样式来渲染页面，在页面head部分加入代码： ，用以声明在移动设备上设置原始大小显示和是否缩放，将initial-scale的值设定为“1”，表示保持原始的尺寸及比例。
　　总之，Media Query能在不同的条件下使用不同的样式，使用页面达到不同的渲染效果。虽然目前各个浏览器对它的支持还有些差异，但随着移动互联网的快速发展，Media Query将进一步适应于各类浏览器，满足用户体验。
　　（二）Bootstrap框架
　　Bootstrap是Twitter推出的一个用于响应式web设计的前端开源框架。通过其丰富的开发文档和实例，可以快速的设计响应式布局网站。其特点是简单灵活，兼容性强，布局方便，插件丰富。使用该框架时，只需在页面头部导入其样式文件bootstrap.min.css，若要使用其插件时，只需将jquery.min.js和bootstrap.min.js两个脚本文件引入即可。值得一提的是Bootstrap 提供了一套响应式的12列的流式栅格系统。通过设置div的class的属性值（.col-xs-*和 .col-md-*等）来控制其宽度。类似于列组合，.col-md-x中的x介于1到12之间，代表在12列栅格容器中合并的列数。如代码