跨平台响应式前端框架技术的应用

何 莉

（长江职业学院 湖北 武汉 430074）

0 引言

在当今的网站登录与网页浏览中，用户不仅可借助PC端来实现，同时也可以借助平板、手机等移动终端来实现。移动终端主要的系统有两个，其一是Android系统，其二是iOS系统。因此，在相关网站的设计与开发中，如果分别按照不同的系统来进行设计与适配，后期的应用、管理和维护都将面临很大的困难，且需要大量的成本消耗。为有效解决这一问题，在具体的网站设计中，就需要将跨平台响应式的前端框架技术加以合理应用，以此来解决传统网站设计与运维过程中面临的难题。

1 跨平台与前端概述

1.1 跨平台

在软件开发过程中，跨平台是一个最为重要的概念，它指的是不将操作系统及硬件环境作为依赖而实现的一种软件开发模式。其主要特征是在一个操作系统中对相应的应用进行开发，当这个应用被放入到另一个操作系统之后，它依然能够正常运行。就广义来看，普通形式的计算机语言都能够达到跨平台效果，具体应用中，开发商仅仅需要将各种平台条件下的Runtime中间件环境提供出来即可。但是就严格意义来看，跨平台指的是通过某些计算机语言来进行的程序编制，在这个程序应用到另一个平台时，只需要对其做少量修改，便可在翻译之后实现正常运行，且并不需要进行Runtime中间件环境的提供。比如，当今Java便是一种Runtime环境提供的跨平台方案，而C语言则是一种严格且标准的跨平台语言形式。

1.2 前端

前端就是网络应用程序中的前台页面，当我们将一个网站打开时，所能看到的全部页面都属于前端。借助于前端，用户可实现与网络应用程序之间的交互。通常情况下，前端页面都需要前端工程师来进行设计与制作。在前端设计中，主要的技术包括HTML、JavaScript、CSS等，同时也包含一些技术框架和延伸拓展出的小程序。另外，在前端设计中，也需要应用到后端开发所提供的动态数据或者API数据，同时也包含着一些数据代码。具体设计中，应根据实际的应用程序设计标准及其应用需求来进行相应技术的合理选择。

2 响应式前端及其设计概述

2.1 响应式前端的主要组成部分

在响应式前端，其主要的组成部分包括以下5个。

（1）流体网格。也就是借助于一个简单的网格系统来进行各个格子的应用百分比单位控制，以此来实现网格大小的合理控制，其主要优势在于网格可按照用户端的屏幕大小来实现自身比例的科学缩放。

（2）弹性图片。所谓弹性图片，就是并不对图片进行固定的尺寸设置，而是使其按照流体网格的缩放来呈现出不同的尺寸。具体设置中，其实现代码为：

但是在具体的设置过程中，因为IEB会导致图片显示失败，所以为实现图片的正常显示，则需要将hack样式加设到IEB中。

（3）CSS3 Media Queries。在响应式设计中，它是一个最为关键的应用部分，通过CSS3 Media Queries的应用，可让客户端显示出的文件样式和屏幕规格、浏览器窗口大小以及浏览窗口方向做到良好适应。

（4）屏幕分辨率。所谓的屏幕分辨率，指的就是屏幕横纵方向上排列的像素点个数，比如，在分辨率为1 920像素×1 080像素的设备中，其横向可排列1 920个像素点，纵向可排列1 080个像素点。在屏幕尺寸相同的情况下，分辨率越高，呈现出的界面也就越清晰。

（5）主要断点。这一部分主要是为min-width以及max-width提供相应的服务。

2.2 响应式前端的关键设计步骤

在对响应式前端进行设计的过程中，为实现其应用效果的良好保障，技术人员一定要严格按照既定的步骤来进行设计。就目前来看，在响应式前端的具体设计中，其关键的步骤有3个。

（1）对meta标签进行设置。具体设计中，需要将设备宽度用作视图宽度，将系统默认的页面自适应效果以及缩放效果禁止。因为IE6～IE8浏览器并不能对响应式设计提供支持，所以需要通过media-queries.js.或者respond.js.插件的增设来为其提供支持。具体设置中，其代码如下：

（2）进行HTML MarkUp的设置。通常情况下，其基础内容包括头部设置、导航设置、内部设置以及页脚设置等。

（3）媒体查询。具体查询中，主要包括以下几方面：①通常情况下，需要采用max-width以及min-width对各种设备进行分辨率大小的检查；②对于苹果产品，主要可借助于dec=vce-width来进行设备宽度检查；③在独立样式表的调用过程中，其常用的模板包括 iPhone和smartPhone、iPad竖屏、iPad横屏、1 024 px显示屏；④关于大屏幕、中屏幕以及小屏幕，具体查询中，可通过如表1方式来进行划分。

表1 大屏幕、中屏幕以及小屏幕的划分方式

通过这样的方式，才可以让响应式前端得到合理设计，以此来充分满足其实际的应用需求，让相应的技术发挥出充分的应用优势。

3 关键技术分析

3.1 HTML5跨平台语言

在移动互联网时代背景下，HTML5这一跨平台语言的应用优势越来越显著，同时也成了PC端、Android、iPhone、Mac、iPad以及Windows Phone等各大主流平台中唯一被广泛应用的跨平台语言[1]。无论是从开发者角度还是用户角度来看，这种跨平台语言都是手机APP开发中的最佳选择。

3.2 响应式布局

所谓响应式布局，就是可以在通过各种设备终端进行网页浏览的过程中，其展示模式可以按照设备的具体分辨率来自动调节。通过该技术的应用，可以让相应的APP与各种移动设备之间达到更好的适配效果，以此来增强用户的应用体验。

3.3 Bootstrap框架

为了让前端响应式布局得以快速设计，越来越多的前端框架开始出现，尤其是Bootstrap框架，更是具有非常显著的应用优势。通过该框架的应用，可以让设计者根据标准规范来进行一整套方案的设计，在此过程中，设计者并不需要从最底层开始进行设计，只需要选择需要的样式视口、布局以及空间样式等，便可对相应的接口、函数以及类型等进行直接调用。这样的设计方式不仅可以让开发者更少地进行代码编写，实现开发效率的显著提升，同时也可以让后续的网站运维变得更加简单。

就目前来看，Bootstrap框架依然是最为流行的一种前端框架形式，该框架主要由Twitter发布，且能够免费应用。Bootstrap框架是以HTML框架、CSS框架以及JavaScript框架为基础而开发出的一种CSS/HTLL框架形式。这种框架形式自提出以来就受到了软件开发工程领域的广泛关注与欢迎，且在GitHub上一直都属于一种最为热门的开源项目。因此，将该框架应用到本次所研究的跨平台软件系统中，便可有效满足该系统的实际应用需求，达到良好的跨平台登录与操作效果。

4 框架设计分析

4.1 前端框架设计需求的确定

本次所设计的是一款教师授课评价系统，该系统的主要设计目标是既可以在PC端登录，也可以在智能手机终端登录，并保障该系统中所有模块和功能在各种终端上的应用和展示效果。因此，在具体的框架设计中，其主要需求包括以下几个方面：（1）该系统应属于一个面向PC端以及移动智能终端的中小型网站，其页面数量不能太多。（2）该系统可能会有相应的需求变更。（3）该系统应该对IE9以上所有浏览器做到有效兼容，可对主流框架予以应用。除此之外，在对前端框架进行选择的过程中，设计者也应该充分考虑到其可读性、可维护性、可拓展性和协同性等各项标准，这样才可以实现前端框架的合理选择，使其满足实际应用需求。出于这些应用需求的考虑，本次系统设计中，选择了Bootstrap这一主流框架。

4.2 前端框架结构分析

在该系统的具体设计中，首先需要将Bootstrap库文件以及视口代码引入，通过这些文件的访问，才可以让响应式页面达到自适应效果，并对Bootstrap、jQuery样式以及jQuery中的JS库进行加载[2]。在JS库以及CSS库的支持条件下，可以将前端代码按照3个部分来进行划分，第1是组件树，第2是功能模块，第3是各种资源，见图1。

4.3 响应式框架布局的实现分析

4.3.1 视口设计分析

具体设计中，要想让页面的显示效果与各种设备的显示屏幕大小相适应，首先需要对各种设备实际的显示宽度进行获取。在此过程中，可借助于HTML5中的新增viewport对设备宽度进行获取，然后做好页面的合理缩放，且在固定之后，需要通过页面文件头部的视口代码设置来组织用户重新进行缩放。

4.3.2 媒体查询以及流式布局分析

媒体查询是一种以CSS3为基础的新特征，其主要作用是对浏览器具体的尺寸变化进行监测，进而使Web响应式设计得以完美实现，让相应的显示页面在PC端、平板、手机端等各种设备中达到良好的自适应效果[3]。在此过程中，需要将各种设备的实际宽度作为依据，分别对阈值对应的CSS布局样式进行设置，再借助于媒体查询技术@media来实现页面和设备之间的良好匹配，而通过各种CSS的调用，便可达到对各种设备自动适应和匹配的功能。

4.3.3 图片自适应设计分析

在具体的响应式设计过程中，设计者也应该足够重视图片的应用。因为在很多的移动设备上也会涉及一些图片的上传和制作等，使其与该网站相匹配，但是如果仅仅通过图片压缩的方式来进行处理，便会导致图片失真，进而对用户的应用体验造成不良影响。因此在具体的设计中，设计者也需要将图片的自适应设计作为重点。

5 响应式前端的页面设计分析

在本系统设计中，选择的框架模式为前端与后端分离形式。在该系统的前端界面上，主要显示的是管理员信息维护、教师登录验证、听课记录的录入、列表维护、查询、统计等。具体设计中，将Microsoft Windows平台7以及Apache平台用作该系统开发中的主要平台；将HBuilder工具、MySQL工具以及PHP工具用作该系统的主要开发工具；将PHP5.0以上的服务器、Apache2.4服务器以及MySQL 5服务器组件中的Windows Server 2003以上版本中的Windows Server平台或者Linux平台安装在该系统的服务器端，并确保其良好运行[4]。

具体应用中，管理人员主要负责对系统中的用户进行管理，包括用户的编辑、删除、添加和密码修改。在管理人员完成了操作之后，可在保存了操作结果之后选择“安全退出”，见图2。

在教务人员登录的过程中，系统会对其身份进行确定。在确定了教务人员身份之后，系统便会跳转到功能界面中，教务人员可根据实际需求来进行个人信息管理、记录查询、记录添加、密码修改以及安全退出等操作，见图3。

在该系统中，登录的员工可以按照教务人员和普通教师进行划分，登录过程中，可直接通过账号密码输入的形式完成登录。在普通教师工作界面中，并没有记录查询以及统计分析这两个权限，但是教务管理人员拥有这两个权限。通过这样的方式，便可为教务人员对各个教师每个月的听课信息情况查询与相应的数据分析提供足够便利[5]。

具体应用中，无论是通过PC端登录，还是通过移动智能终端登录，系统都会对设备屏幕的实际宽度进行自动识别，然后根据其实际的显示模式以及分辨率来实现展示页面的合理调整，以此来达到良好的跨平台响应效果，为用户带来最佳的应用体验。

6 结语

综上所述，随着当今网络信息技术的不断发展与各种移动终端的不断更新，跨平台响应式框架技术在网站开发中所发挥的作用也越来越显著。通过该技术的合理应用，不仅可以让网站的开发和运维变得更加简单便捷，同时也可以为用户的网站登录与浏览提供足够的便利，有效解决网站在PC端和移动智能终端不兼容的问题，以及网站在Android系统与iOS系统中不兼容的问题。这样才可以有效适应当今时代科技的发展，满足不同用户的实际应用需求，避免不同设备对于网站登录和网页浏览的限制，为用户带来较好的应用体验。