摘 要：随着互联网的不断发展，尤其是移动互联网的发展，网页浏览设备也是尺寸各异，对于显示固定尺寸的网页存在诸多的缺陷，因而如何使网页内容能够在不同尺寸的设备下正常的显示，提高用户的浏览体验是网页制作人员必须掌握的技术，本文针对自适应网页的制作技术进行深入的研究和探讨。

关键词：流式布局；響应式布局；弹性布局

固定尺寸的页面是利用绝对单位固定网页元素的宽度，使网页的布局排列不随分辨率和设备尺寸的变化而发生改变。因为早期显示设备更新换代相对缓慢，设备的尺寸变化差异并不大，大多都集中在1024的分辨率左右，后来随着宽屏与移动设备的普及，显示设备的尺寸就开始多样化，尤其是手机的分辨率更是种类繁多。

为适应技术的发展，用户的需求，网页的尺寸不得不针对设备进行改变。早期解决方案，大多采用电脑与移动设备独立设置站点的方式，电脑准备一个站点，移动设备设计一个站点，通过设备判断，自行跳转显示相应的站点页面。

随着移动设备智能化的推进，电脑与手持设备的界限开始变得模糊，分别设置站点的方式显得有点效率低下，如何能实现一劳永逸呢？自适应的网页制作技术就开始流行起来。

自适应网页并不只是在页面尺寸上的变化那么简单，还包括内容上的改变，总体可以分为三种，流式布局、自使用布局和响应式布局三种。

1 流式布局

1.1 流式布局的概念

对于流式布局的概念，不少教材和网络上都有许多不同的理解，但是核心的思想都差不多。所谓流式布局，有的也叫流体布局，是通过改变元素的排列达到适应设备尺寸的目的。即页面内容会随着容器尺寸的变化在排列上而发生流动，就像液体一样，遇阻后，哪里有空间，就往哪里流，流式布局的思想也是如此。

文档中的元素在默认状态下，都处于向左向上的流体排列状态，例如删掉排在前列的元素，后面的元素会自动向左或向上补位，从而保证内容排列上的连续性。

1.2 流式布局的应用

流式布局既可以针对固定宽度元素的排列，也可以针对自适应宽度元素的排列，其中浮动技术是流式布局中使用最多的技术之一，浮动可使不同元素横向排列。

固定宽度使用绝对单位设定，例如px；

自适应宽度使用相对单位设定，例如百分比或em。

如图1所示：

2 响应式布局

流式布局虽然可以实现一定程度上的自适应，但流式布局需要对排列的每一个元素设置大小，切随着尺寸的变化，并不能适应所有不同尺寸的显示设备。尤其是在较小的空间显示较多的内容时，流动布局就更加显得力不从心了。

2.1 响应式布局的概念

随着移动互联网的迅速发展，响应式布局成为近几年十分流行的一种布局思想。很多时候，我们需要依据不同的设备尺寸如手机、平板、电脑等，对内容的大小、排列方式甚至是取舍都要做出不同的选择。响应式布局就是针对设备的尺寸利用媒体查询功能进行有条件的判断，从而依据不同的情况选择不同的样式执行。

2.2 响应式布局的应用

早在CSS2時代，就有了媒体查询的应用，但只能对设备的类型进行选择，无法设置条件。因而媒体查询的使用受到限制，只是在打印设置方面略有应用。

到了CSS3，媒体查询的功能被进一步强化，增加了对设备的条件设置。如图2所示：

3 弹性布局

尽管响应式布局弥补了流式布局的局限性，但因这种布局有大量的缺陷，也使得在开发过程中效率低下，响应式布局主要有以下缺点：

1）需要兼容的设备种类太多，工作量太大，开发效率十分低下；

2）由于是条件性选择执行，导致大量无效的代码和元素存在，降低了页面加载的速度；

3）当页面布局发生较大改变时，CSS代码不易于修改和维护，造成代码的混乱。

3.1 弹性布局的概念

不同于流式布局，弹性布局主要是通过更加灵活分配元素的大小实现对设备尺寸的适应，不影响元素的排列。弹性布局是CSS3新提出的一种布局思想，它可以针对其中已知和未知大小的元素动态的调整和分配空间，确保内容在排列上并不发生变化而同时又能适应设备的需求。

3.2 弹性布局的应用

流式布局需要对排列的每个元素设置大小，弹性布局可以自动调整未分配的空间，从而达到自适应的目的。如果说，流式布局对于水平排列的自适应还能勉强应对，那么对于垂直方向上的自适应，就显得有心无力了，而弹性布局提供了水平和垂直两种弹性适应的方案。如图3所示：

4 总结

自适应网页的出现是随着移动互联网的发展而出现的必然产物，在今后将会更会流行起来，无论是流式布局、响应式布局还是弹性布局，都有其自身的优点，如何使用，需要参照实际的需求制定解决方案，不可过分追求某一种技术的使用，否则将适得其反。

参考文献：

[1] 郑伟，薛岚.高职院校图形类专业实践教学研究[J].科技资讯，2010（12）：248.

[2] 郑伟.网页布局技术的对比研究[J].福建电脑，2016（12）.

[3] 郑伟，薛岚.高职院校图形类专业《网页设计与制作》课程建设改革的探讨[J].艺术科技，2013，26（3）：283.

作者简介：

郑伟（1982-），男，湖北宜昌人，工程硕士，讲师，研究方向：网站建设、web前端。