什么是响应式布局

摘 要：响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。该文介绍响应式布局页面的基本表现、常用技术以及流行框架。

关键词：响应式布局;百分比;媒体查询;响应式布局框架

1  什么是响应式布局

响应式布局是为了解决移动互联网的浏览而诞生的，它是伊桑？马科特（Ethan Marcotte）在2010年5月提出的概念，其基本是一个网站能够兼容多种终端（手机、平板电脑、笔记本电脑或台式机等），而不需要为每种终端开发一个特定的网站版本。响应式布局的目标是“一次设计，普遍适用”，也就是让同一幅网页自动适应不同大小的屏幕，在网页主体内容不变的前提下，根据屏幕大小自动调整页面的展现方式以及布局，同时还要保证良好的用户体验。

图1所示是一个响应式网页在台式机浏览器上显示的效果。页头是大幅广告图，广告图上方是一行链接组成的导航栏，下方由若干小图组成的页面主体。图2所示是同一网页在平板电脑上显示的效果。页头和页面主体的大布局没有变化。页头广告图随屏幕尺寸缩小而缩小;页面主体的小图没有采取缩小的办法，而是从横向排列的一行变成纵向排列，既保证小图数量不会缺失，又不会因缩得过小而影响用户浏览。图3（a）所示是同一网页在手机上显示的效果。页头和页面主体的大布局依然没有变化。页头的广告图随屏幕尺寸缩小而进一步缩小（图上的文字已经省略），同时广告图上方的导航栏变成缩略图的图标“           ”，当鼠标点击该图标时，会弹出完整的纵向排列的导航栏，如图3（b）所示;页面主体小图依然保持纵向排列。

2  响应式布局的技术内涵

响应式布局的网页要想达到以上效果，通常要运用一系列技术。

2.1  百分比布局

为了让网页适应不同的屏幕尺寸，应该允许网页宽度自动调整，刚好充满整个屏幕或浏览器窗口而不被遮挡，百分比布局能较好地解决这个问题。响应式布局页面中很少使用绝对宽度，而是大量使用百分比布局。

百分比是相对于固定像素尺寸单位而言的，是一种相对于父级元素的计量单位，重点强调宽度。当改变浏览器窗口大小的时候，采用百分比布局的页面及其内部元素的尺寸也会随之发生变化。比如，图1中页头的广告图就可以设置成宽度为100%，其含义是广告图的宽度等于页面宽度，所以无论浏览器窗口尺寸如何变化，广告图也是充满页面宽度的。

2.2  媒体查询布局

媒体查询（media query）中所说的媒体可以理解成设备，所谓查询，包括查询设备的不同屏幕大小、不同分辨率等参数，使用CSS代码进行媒体查询可以创建响应式布局。

媒体查询具体表现为一种位于CSS代码中的判断表达式，每个判断式对应一组CSS样式代码。如果判断结果为True，则应用该样式表，如果为False则不应用该样式表。通过若干判斷条件的组合，可以使我们灵活地对特定设计场景使用自定义的样式规则。例如，当浏览器窗口最大宽度超过1200px时，图1所示页面主体的小图横向排列;浏览器窗口最大宽度小于1200px时，图1所示页面主体的小图纵向排列。

响应式布局除了百分比布局、媒体查询布局等常用技术，还包含动态显示不同字体大小的移动端rem布局、随窗口宽度的改变而动态改变水平方向布局的流式布局等内涵。所以，响应式布局不是一种技术的应用，而是一系列技术的组合。

2.3  响应式布局框架

要达到类似图2所示的效果——当窗口尺寸缩小到一定程度，导航栏变成一个缩略图，就要靠编程实现了，常用手段是借助基于JavaScript语言的响应式前端框架。

响应式前端开发框架可以帮助前端开发人员大大简化开发过程，每个框架会包含一定用途的UI组件及JavaScript插件。使用这些框架最大的特点是响应式，让所有CSS组件及JavaScript插件都可以很好地从台式机过渡到移动设备上，同时可以快速、方便地构建页面布局，在导航、表单、下拉框、表格等UI组件的设计上保持风格一致。

目前比较流行的响应式布局框架有Bootstrap、Foundation、UI Kit、Pure、Amaze UI、Skeleton等。

3  结论

响应式设计能够适应各种屏幕或者设备进行页面展现，解决了各种规格设备给程序员带来的挑战，让同一个网页无论是在传统电脑、平板电脑或者手机上都能正常展示，也可以针对不同的设备定义不同的样式。随着目前移动设备的普及，响应式布局已经成为前端布局技术发展的趋势之一。

参考文献：

[1] 模板世界，Bootstrap蓝色整洁企业网站模板–ultimate，http：//www.templatesy.com/demo/775/index.html，2017-09-05

[2] 前端开发博客，响应式布局框架，http：//caibaojian.com/responsive-frameworks.html，2015-02-03

[3] 知乎，什么是响应式布局设计？，https：//www.zhihu.com/question/20976405，2013-04-28

作者简介：

朱立（1970.03），女，汉，北京市人，北京理工大学计算机应用技术专业2005级硕士研究生，北京信息职业技术学院副教授，主要研究方向为软件技术。