响应式Web设计在移动终端的实践探索

计算机时代2018年第5期

0引言

我国移动互联网市场快速扩展，移动互联网设备不断更新，在这样的环境下，移动互联网的网站设计必须紧跟移动设备的硬件技术水平，完善网站与移动终端的贴合度。于是，如何将网站在不同的设备上展示给用户就是需要思考的问题。在理想状态下Web 设计可以根据用户的不同需求以及显示屏幕的不同分辨率展示不同的版本，为用户提供最佳的用户浏览体验[1]。但是显然，面对不断更新的硬件设备，Web的设计需要不断的更新，无疑会增加各项工作的成本。结合现有的技术，采取响应式Web设计可以很好地应对这一问题。在Web页面的设计和开发中，针对不同客户的需求，在命令网站针对移动终端设备上的硬件性能对自身的布局进行设计，通过这样的方式，移动终端可以得到最佳的Web展示。在响应式网页的设计中，主要涉及整合媒体查询、弹性视觉媒体和流动布局，通过以上的技术支持可以很好的解决不同终端设备的适应性问题。

1移动互联网和智能移动终端的发展现状

在现阶段的技术实力和市场需求的转变中，在网页设计领域正发生着不断的变化，在过去的一段时间里，PC作为主要展示网络页面的设备，在网页设计上可以主要考虑内容的因素，设备种类相对较少，网页设计过程中需要较少的设计方式。但随着移动互联网终端的发展，多种尺寸的屏幕，不同大小的分辨率，适当的Web设计成为市场的需求。

设计人员根据设计的理论提出了响应式Web的

DOI:10.16644/33-1094/tp.2018.05.008

响应式Web设计在移动终端的实践探索

郭飞军

(浙江国际海运职业技术学院，浙江舟山316021)

摘要：随着移动互联网的发展，Web设计也发生了很大的变化。目前的网页设计已无法与移动终端的硬件设计相适应，不同网页在不同设备上使用的兼容性问题逐渐暴露出来。这就要求网页能够自动切换分辨率、改变图片尺寸及相关脚本功能等，来适应不同设备。响应式Web设计理论应运而生，旨在解决现阶段网页设计在移动客户端上使用的问题。

通过Web设计的关键技术使网站能够动态地适应各类用户终端设备，从而满足各类用户的需求。

关键词：响应式Web设计；移动终端；流式布局；媒体查询

中图分类号：TN911.22文献标志码：A文章编号：1006-8228(2018)05-29-03 The practical exploration of the responsive Web design in mobile terminal

Guo Feijun

（Zhejiang International Maritime College,Zhoushan,Zhejiang316021,China）

Abstract：With the development of mobile Internet,great changes have been taken place in the Web design.The design of webpage is no longer compatible with the hardware design of mobile terminal.The compatibility problem of displaying different web pages on different devices is gradually exposed,it is required that the web page can automatically switch the resolution, change the picture size and the related script functions to adapt to different devices.The theory of responsive Web design came into being,which aims to solve the problem of compatibility at present.The key technology of Web design enables the web site to dynamically adapt to all types of user terminal devices to meet the needs of all types of users.

Key words：responsive Web design；mobile terminal；flow layout；media query

··29

Computer Era No.52018

设计理念，设计的网页可以根据终端设备的性能进行适当的响应和调整。向用户提供友好的网页体验。在开发过程中，响应式Web设计的目标在于网页对设备的兼容性，而非网页针对设备响应出不同的版本。Web设计的目标设备不仅包括手机终端，还可以兼容平板电脑，电视，PC显示器，以及手机屏幕的纵向或横向的使用。

2响应式Web设计流程

响应式Web设计中一般要经过以下的三个基本流程：首先，确定目标设备的基本硬件组成情况，以及交互信息流需求的相关信息等。这些信息的获取要通过市场调查和咨询；再者，根据以上的信息对网页作出线框模型，根据掌握的信息需求设计网页的功能模块；之后，要进行UI效果设计，进行交互功能的定义完善网页的细节，结合理论进行技术性的完善；最后通过前端编辑程序进行规划和设计。

3响应式Web实现的原理

响应式Web设计的原理是，网页的设计与开发中要根据客户的行为和设备的硬件性能进行相应的响应与调整。在实践过程中存在多方面的结构构成，主要有弹性网格和布局、响应式图片、CSS3中媒体查询属性等。在使用中，无论用户使用什么样的设备，页面可以针对设备的响应获得设备的硬件性能，包括分辨率大小，图片适用尺寸以及相关的脚本功能等，在这样的技术设计下，页面可以主动去响应设备的基本性能[2]。通过网页，以设备之间的响应对网页进行调整，从而解决网页与设备不匹配的问题。在响应式Web设计中，理论上要求网页根据设备的性能进行调整，但是设计中并不能像机器设计中的传感器的设置，响应式Web设计中更注重思维上的设计。现阶段液态布局、帮助页面重新格式化的media queries和脚本等技术已经开始应用。响应式Web设计不但是一种物理的设计，更是一种是为形式的体现。

4响应式Web设计的关键

构建响应式Web的技术关键在于：HTML5技术、CSS3Media Query技术。最主要的技术环节包括流体布局、流体图片、媒体查询。

4.1HTML5与CSS3技术

HTML5是一个完整的技术组合，主要包括

HTML、CSS和JavaScript，其特点在于可以强化Web 网页的表现性能，并且还拥有本地数据库等Web应用功能，HTML5用于移动应用的开发中具有很好的效果，设计是可以创建更简洁的代码参与金响应式设计中。现阶段HTML5已经可以适应大部分常用的浏览器。

HTML5的特性：设置了更多的描述性标签，头部、尾部、导航区域、侧边栏等标签，对页面进行结构化的描述；良好的多媒体支持；Web应用方面提供了多种新功能，可以在技术上弥补对第三方的依赖；Web socket支持；跨文档消息通信；客户端储存。

响应式设计的主要方法是利用工具CSS3媒体查询属性，包括：设备屏幕的尺寸、设备屏幕的分辨率等。这些属性可以通过逻辑运算符构成表达式，以此判断目标设备的硬件属性，调整加载样式和页面布局，响应出相应的网页展示[3]。响应式设计的目标在于有条件的应用HTML和CSS实现网页对多种设备的兼容能力，CSS3模块的功用就在于媒体查询，根据特定视口设置特定的CSS规则。CSS3中将原来庞大的模块进行划分，呈现出诸多小的模块，包括盒子模型、列表模型、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。

4.2流式布局

针对固定布局的缺点响应式Web设计把固定的设定设置为相对的设定，主要有流体布局和弹性图片。

4.2.1流体布局

流体布局的设置是形成响应式Web的基础，响应式Web设计采用弹性布局来满足不同设备的硬件要求，将布局的尺寸设置为灵活的、可以变动的形式，整个页面的相对比例根据屏幕的大小进行改变，整个页面更加有弹性。可以很好的兼容不同设备的不同形式，流体布局的主要方式是调整百分比和设置字号（em）的比例。

常用的方法是调整百分比，在布局是尺寸命令用%而非像素的设置，这就可以是页面相对于浏览器的窗口进行伸缩，实现对屏幕的适应。在设置容器尺寸时吧不可以跨越整个浏览器窗口，只是跨越窗口宽度的一定比例，保证尺寸在屏幕尺寸之内并产生比较好的效果。也可以考虑用比例设置填充和空白边框的设置，命令填充部分和空白边的宽度随窗口尺寸的变化不断变化。设计一个三列的流体布局可以使用如下的代码：

#warpper{width：85%；}

··30