基于HTML5进行响应式Web应用的技巧

刘于沛

【摘要】 相比较以往的版本，HTML5具有许多新的特性，其已经成为了一种主流的Web前端开发技术。本文结合HTML5的概念和特性，对基于HTML5的响应式Web设计进行了讨论和分析。

【关键词】 HTML5 响应式Web 设计

前言

移动互联网的出现，对于Web系统提出了许多新的要求，响应式Web也因此受到了越来越多的关注，其页面布局可以根据用户终端显示设备的差异，进行自动调整，从而实现对于所有尺寸屏幕的兼容，而且可以通过一次开发，实现PC版、触屏版以及手机版的相互融合。基于HTML5，做好响应式Web的页面设计，是相关技术人员需要关注的重点问题。

一、HTML5概述

HTML的指超文本标记语言，全称Hyper Text Mark-up Language，是万维网的基础描述语言，我们平时上网时浏览的各种网页，基本上都是基于HTML设计制作的。HTML5是对于HTML语言的第五次修订，也是现阶段的最新版本。事实上，HTML5并非单纯的指HTML技术，还包括了CSS、JavaScript脚本语言等。

HTML5的出现，主要是为了满足移动设备对于多媒体技术的一个应用需求，canvas、video等标记的应用都能够实现上述目标。同时，在HTML5中，用户与文档的交互方式发生了巨大的改变，首先，新解析规则的应用，进一步强化了HTML5的灵活性，拓展了其适用范围；其次，新增加了一些属性，对冗余属性和过时属性进行了淘汰；然后，支持不同文档之间的拖放功能以及离线编辑功能，而且具备更加详细的解析规则。

对于终端用户，HTML5丰富的功能和应用减少了对于各种插件的依赖性，可以更好的满足用户的各种需求，如听音乐、看电影、玩游戏等，同时其对于各类设备的兼容性较强，可以直接将麦克风、摄像头等与影音软件进行对接，还支持手机端的跨应用切换功能，用户可以直接在不同的APP之间进行切换，而不需要返回桌面，便捷性更强。对于开发人员而言，HTML5对语法进行了重新定义，实现了PC端与移动设别的统一标准，结合数量巨大的开源库，使得Web程序的开发设计变得更加简单，开发出的程序也可以实现全平台兼容，成本有了很大的降低。另外，HTML5所提供的實时更新功能，为Bug的处理提供了便利。

二、基于HTML5的响应式Web设计

移动互联网和智能手机、平板电脑等的发展和普及，使得许多人习惯在移动设备上进行工作和学习，在这种情况下，如何实现页面大小的自动调整，适应不同尺寸屏幕的需求，就成为设计人员需要重点关注和解决的问题。就目前而言，部分网站针对不同的终端设备，制作出了不同的网页版本，可以满足用户的个性化需求，但是这样不仅成本较高，而且运行维护异常繁琐。对此，可以采用响应式Web，或者说自适应Web，通过对现有开发技巧的整合，对页面布局问题进行解决。

2.1 viewport指令设置

viewport指令存在于meta标签中，该标签是HTML文档中head部分的标签，可以将其中的name属性值设置为viewport，其实际上是手机浏览器显示的页面区域，默认大于浏览器本身的可视区域，在这种情况下，如果网页在手机中显示，会出现横向滚动条，影响操作。对此，在设计环节，可以将viewport指令的宽度调整为设备本身的屏幕宽度，不允许手动缩放，就能够保证页面的正常显示。

2.2页面宽度与字体设置

网页必须能够自动进行布局的调整，因此，页面宽度以及字体必须设计为相对数值，而是应该采用相对数值或者自动值。以字体设置为例，应该采用相对值rem，将HTML根元素作为参照值，通过对HTML根元素的合理设计，字体可以自动依照设定好的比例进行调整。例如，在网页中，默认的字体大小为16px，有1rem=16px，通过相应的代码设计，可以将字体大小调整为14px，以适应小屏幕的显示需求。

2.3 CSS执行

在CSS3中，引入了一种全新的方法，即媒体查询，其能够根据不同的媒体设备，选择不同的CSS样式，自动执行。因此，基于HTML5，如果想要根据不同的屏幕宽度执行不同的CSS文件，则可以利用Link标签或者@media的方式进行引入。

三、结语

与以往的版本相比，HTML5具有更加丰富的功能和更加显著的优势，基于HTML5进行响应式Web的设计，可以满足不同终端设备对于网页显示的不同要求，为人们的工作和生活提供便利。相关技术人员应该认识到HTML5在移动互联网时代的发展前景，做好进一步的研究工作。

参 考 文 献

[1]蒋凌燕，查英华.基于HTML5 的响应式 Web页面重组适配技术研究[J].计算机与现代化，2015，（2）：7-10.

[2]台雯.HTML5在WEB前端开发中的应用研究[J].天津职业院校联合学报，2016，18（8）：70-73.

[3]张坤.响应式设计分析及其与web应用程序的对比研究[J].攀枝花学院学报，2016，33（2）：29-31.