响应式Web的设计的关键技术研究

杨秀生

摘要：近年来，移动互联网得到大范围推广，响应式Web的设计的关键技术也得到完善，响应式Web的设计关键技术是移动互联网开发热点。主要是因为响应式Web设计整合了媒体查询（media queries）、弹性视觉媒体和流动布局（fluid grids），使得Web网页得到合理优化、视觉媒体能按照特定布局进行动态布局、流动布局能创建可缩放、可流动的弹性版式，这是Web技术的进步。笔者通过查阅相关文献和整理相关数据，展开对响应式 Web 设计概述及关键技术、响应式Web的开发流程、响应式Web的优势等展开分析，得出以下的结论。

关键词：响应式Web；设计；关键技术

中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2017）05-0051-02

随着这几年，移动智能新品的推出，PC 互联网加速向移动端迁移和移动终端体验效果迥异，需要Web具有更强的兼容性，能够在用户的PC或者是智能客户端进行操作，响应式Web的设计的关键技术得到了重点开发，这关系到一个网页是否能够得到大众的认可，为大众提供良好的客户体验。

据有关数据反映，国内Pc端网站的日均覆盖人数基本保持在 2.3 亿人次左右，移动端 App 的日均覆盖人数已接近 2 亿，并呈现持续上涨趋势，这些数据表明，移动互联网智能化已经来到，人们的工作和生活交流工具从PC客户端转移到移动智能端，传统的网页势必遭到淘汰。

1 响应式 Web 设计概述及关键技术

1.1 響应式 Web 设计概述

响应式Web技术在互联网开发的时候，因为其适用范围较少，没得到重视，但随着近几年来，智能产品开发，要求Web满足PC客户端和移动客户度，相关的Web设计者才开始重视响应式Web 设计。

2010 年美国著名网站设计师伊桑·马科特（Ethan Marcotte）在“A List Apart”发表题为“Responsive Web Design”的文章，提出了“响应式 Web 设计”（Responsive Web Design，简称RWD，也称“自适应网页设计”）的概念，指的是能智能识别屏幕宽度、并做出相应调整的网页设计。响应式Web的设计注重的是实现一个网站能兼容多个终端，通过媒体查询、弹性视觉媒体、流动布局的结合，实现兼容性网站创建，一个网站能够满足不同客户端用户需要。响应式Web设计能使客户端适应用户设备环境，智能化地适应大众的需要。

1.2 响应式 Web 设计响应式 Web 设计

一个好的网站设计，主要能够根据用户端进行前台页面调整，利于形成良好的客户体验。响应式Web设计由媒体查询、弹性视觉媒体和流动布局三种核心技术构成。

1）媒体查询

媒体查询是基于CSS33的一种新特性，主要应用于某种每天特征下的显示规则。RWD设计布局时，通过优先建立移动客户体验，利用媒体查询调整大屏幕，用移动端上设计原则能保证Web为不同类型的客户提供最佳的客户体验。目前，媒体查询支持 IE9、Firefox3.5、Safari3 以及它们的更高版本，同时支持大部分智能手机和其他基于屏幕的设备。这是科技发展的重大突破，得到很多的大众的支持。

智能设备的流行，让Web设计者可以根据各自不同类型的设备属性，进行贴心设计，支持不同分辨率、屏幕尺寸、系统平台等设备环境。完美的完成响应式Web设计，实现PC电脑客户端、手机客户端、平板等设备查看网页无障碍。国内的Web设计通常是利用link标签和@media 规则来实现。

2）弹性视觉媒体

网站的页面设置，随着电脑技术的进步，能够根据用户的习惯性进行操作，固定布局的页面宽度已经是过去式网页设置，现在智能机浏览页面，可以通过手指滑动进行屏幕调整，根据客户的需要进行智能化调整，不需要客户自己调整Web界面的缩放问题，是页面具有可变性。传统的网页主要采用的是“图片+文字”的形式构成网页，而响应式Web的设计可以插入gif图片、jpg图片等多种形式。

3）流动布局

传统的网页界面随着科技的进步，人们淘汰了，目前响应式Web中主要是通过CSS 技巧，使图像和媒体比例限制在其父元素范围之内，相应于布局的其他部分按比例缩放，以适应其设备的大小。现在很多大的门户网站，实现手机客户端与PC客户端的换转，通过弹性图像和媒体，让设备完成分类。

2 响应式Web的开发流程

响应式 Web 设计中的断点都依赖于 CSS3 的Media Queries 来决断，断点就是设备宽度的临界点 ， 也 就 是 Media Queries 中 的 min-width 和max-width 的值。目前国内的网页设计，主要偏向智能手机客户端，但智能设备、PC用户客户端也不能缺少，都需要开发者考虑在内。网页的制作通常有五个流程：计划分析、总体架构设计、具体开发、精确测试、完善修改。网页是否能够得到客户的认可，需要后期的不断维护，以此达到良好的客户体验。

国内的响应式Web设计，主要是根据用户行为及设备环境，进行页面设置，采取智能化的感应处理，根据用户系统、屏幕尺寸、屏幕定向等实现页面自动切换分辨率、图片尺司及相关脚本功能等。不需要人工进行设置，是一种全兴的设计理念。

1）计划分析

响应式Web设计首先要确定网站适合的系统平台，要充分考虑到客户设备环境，比如设备类型、屏幕尺寸等，实现人工智能，避免客户进行自我调整，造成设计网页设置的网页效果不能够完全展现。

2）总体架构设计

Web设计师根据网站用途以及开发需求，对网站进行总体架构设计，拿出适合的方案，根据调查数据，进行模拟测试，以便提出及时的发现设计漏洞。传统的网页里面元素可以继续利用，但需要Web技术人员进行更新，搭建网站交换器，实现网页运转协调。

3）具体开发

将网站所需图片导入到相应的设备，进行设备测试，看不同的设备能否适应系统的设备环境。前端构建，使用响应式前端开发框架，这样有利于实现开发过程的高效简化，同时确保开发的网站具有跨平台、兼容性、响应式等特点另外前端开发人员需要和设计师多沟通，确保响应式设计的页面布局、内容尺寸符合大众审美需求。

4）精确测试

网页设计需要根据用户需要，Web设计者根据客户需要及时进行页面设计调整，让页面能够根据用户设备环境进行调整，定期的采取数据收集模式，对收集到的数据进行分析讨论，按照客户的使用习惯进行页面设置，让眼界能够实现灵活性。

5）完善修改

根据网站浏览数据进行数据分析，定期根据客户需要进行更新，适当的加入新的主题元素，响应式Web的设计者，需要综合客户反映的数据，进行网页调整，能保证Web的与时俱进性，实现资源模式的进步。

3 响应式Web的优势

目前，伴随着HTML 5、CSS3、Java Script 等 Web技术开发，响应式网页设计以其设计实用性和良好客户体验，得到大众认可，响应式Web的设计已经大面积的取代传统的网页设计，是门户网站的首选条件，以下是笔者总结的响应式Web的设计具有的优势。

1）响应式Web的设计让网页操作简便

响应式Web的设计相较于传统网页来说，能够为客户提供良好的客户体验，主要是因为他能够自动适应客户的设备，且网络服务终端更加的人性化体验，得到大众认可。相较于传统的网页，响应式Web能够根据用户需要，开发较小的适应设备，方便客户进行操作。

2）利于网站推广

响应式Web的设计利于网站的推广，能通过单一的URL地址收集所有的社交分享链接，利于创建更为开阔的网页服务平台。且网页的制作精良，能够收到当代潮流人士的推崇，人們的交流设备也倾向于支持响应式Web设计类型网站。

3）减少资金投入

响应式Web设计的优势在于不需重定向，节约开发网站成本，实现网站的独立经营，定期的网站维护会减少，不需要投入更多的人工成本，减少资金投入，且不需解决重定向及定向用户。很多的网站的前期搭建需要投入大量的资金，需要一个循环的资金产业链，响应式Web的设计，不需要重定向和网页代理，是直接面对客户，减少了中间环节的资金循环。

参考文献：

[1] 崔松健. 响应式Web设计[J]. 信息与电脑：理论版，2013（10）：25-26.

[2] 郭岚. 基于响应模型的Web界面生成技术的研究与实现[D].西北大学，2015.

[3] 自动化技术、计算机技术[J]. 中国无线电电子学文摘，2007（1）：165-240.

[4] 赵建保. 响应式Web设计关键技术及设计流程[J].电脑知识与技术，2014（5）：1066-1068.

[5] 陈曦. 面向多设备响应式设计的机制研究[D].北京邮电大学，2015.