弹性盒子下的响应式网页布局

弹性盒子下的响应式网页布局
摘要：一个良好的网页布局，可以有效提升用户浏览的舒适度，进而优化用户体验。

而在移动互联网时代，用户除了使用PC端的桌面浏览器访问网页，还会使用其他各种移动终端访问网页。

而响应式页面布局，可以是一个网页能够兼容不同终端，可以为不同终端用户提供更为舒适的界面和良好的用户体验。

基于此，笔者将介绍基于弹性盒子模型实现响应式页面布局的原理和思路。

关键词：响应式布局；媒体查询；弹性盒子
引言
传统的网页布局技术，大多是针对PC端网页进行开发的，一般包括固定宽度布局或流式布局。

固定宽度布局受限于不同浏览器的分辨率，在小屏幕大宽度中会在浏览器中出现横向滚动条，影响了用户的体验。

而流式布局虽然采用了百分比单位，防止在页面中出现横向滚动条，但在不同分辨率下，布局结构不能灵活调整，也同样影响了用户在交互中的体验效果。

当然要解决这个问题，开发人员也可以根据不同的设备开发出多个版本的网页，但这也会导致网站开发和维护工作量的成倍增长。

正因为这种情况，EthanMarcotte在2008年提出了响应式布局的概念，简单来说，就是让设计的网页能够响应用户的行为，根据不同终端设备环境〔系统平台、屏幕、屏幕手持方向等〕自动调整尺寸，实现完美的布局显示效果。

要实现响应式网页设计，媒体查询技术、布局技术和响应式图片是3个关键要素。

接下来笔者将基于弹性盒子模型的布局技术来分析如何实现响应式网页布局。

1媒体查询
在CSS3标准中，媒体查询可以根据视口的宽度、设备方向等差别化，加载不同的CSS 样式到达渲染不同页面显示格调的效果。

网页设计师可以针对不同的终端设备屏幕分辨率来编写不同的CSS布局样式，然后用户浏览网页时，终端设备可以通过自身的屏幕分辨率选择一种适合的页面布局。

这样就可以实现在PC、平板和手机等终端设备中调用不同的CSS样式，从而实现完美的响应式设计。

媒体查询由媒体类型、媒体属性和语法关键字3个局部组成，其根本的语法结构如下：上述代码中，@mediascreen表示媒体的类型为screen，也就是计算机屏幕设备。

在媒体查询中，人们常用的媒体类型主要为screen和all。

min-width：1200px表示屏幕宽度大于或等于1200px时的应用样式。

下面笔者利用媒体查询在不同终端设备中实现不同布局技术的效果，分别针对PC、平板和手机端进行样式布局效果。

笔者将
设定页面的内容分为3个模块，该页面的HTML结构局部代码如下：对于PC端来说，屏幕分辨率一般比拟大，所以笔者设计为3列的排版布局结构，具体如图1所示。

实现的关键代码如下：针对平板端来说，屏幕的分辨率一般没有PC端高，所以使用3列排版布局可能会显得比拟紧凑，在这里调整为两列排版布局结构，具体如图2所示。

实现的关键代码如下：在手机端中，屏幕分辨率一般不大，所以移动端页面的布局一般都是一列结构显示效果，具体如图3所示。

实现的关键代码如下：
2弹性盒子模型的原理
使用流式布局进行响应式页面布局，存在适配工作量大、百分比单位使用不方便等问题，因此在CSS3中，W3C引入了新的布局机制——弹性布局。

弹性布局可以轻松进行响应式布局，既不使用浮动，也不用再计算传统的盒子大小，是一种非常灵活的布局方式。

弹性盒子的结构相当于在一个大盒子中放置几个小盒子，它们彼此互相独立，容易设置。

整个弹性盒子由容器、子元素、主轴和交叉轴构成，具体模型如图4所示。

通过给容器盒子设置display 属性为flex或inline-flex，将其定义为弹性容器。

在弹性容器中的子元素那么为弹性子元素，在弹性布局中，子元素的排列方向由主轴的排列方向来决定。

表1介绍了常用的弹性布局属性。

3弹性盒子布局的实现
了解了弹性盒子模型的根本原理之后，下面来模拟实现一个博客网站的响应式布局。

该页面在PC端和移动端所呈现的效果如图5所示。

根据页面的布局结构，该页面主要分为3个局部，分别为页面头部、主要内容区域和页脚信息，其中的主要内容区域又可以分为导航、文章内容和侧边栏3个局部。

页面的HTML结构代码为：根据页面效果分析，可以知道页面头部和页脚信息局部不需要响应式设置，只需要简单设置CSS盒子属性即可，所以该局部的CSS代码为：接下来笔者通过设置弹性盒子对页面主要内容区域进行响应式布局，其中在PC 端上主要内容区域的3个盒子是横向排列的方式，其中文章内容局部所占据宽度较大。

而在移动端上，3个盒子呈现的是纵向排列方式，并且可以看到文章内容局部的排列顺序发生调整，变成在主轴的第一个元素。

首先使用弹性盒子属性设置页面的PC端效果，其中给.content 类所在的主要内容区域添加dispalay:flex属性设置，让其成为弹性容器，这样其子元素会按照弹性布局进行排列。

然后分别给.main、.nav和.aside类的元素设置order属性和flex-grow 属性，调整弹性子元素的宽度和排列顺序，到达页面效果的要求。

主要代码如下：接着利用媒体查询设置移动端效果，通过调整.content类元素的flex-direction属性将弹性盒子的主轴设置为从上到下的纵向排列，然后调整.main和.nav元素的order属性，让文章内容盒子排在主轴的第一个元素。

在这里可以看到使用弹性盒子属性可以非常容易地调整元素的大小和排列顺序，能让网页在不同的终端设备上都呈现出完美的布局，给用户带来较好的体验效果。

4结语
基于弹性盒子的响应式布局带给人们一种新的跨平台Web布局模式，可以较为轻松给人们带来不同终端设备上的页面布局方式。

当然因为弹性盒子模型是在CSS3版本才提出来的一种布局方式，所以一些早期的浏览器是不支持弹性布局的，这点Web开发者要分明了解。

如果不考虑低版本浏览器的兼容问题，笔者相信弹性布局将会越来越流行。

参考文献
【1】黑马程序员.HTML5移动Web开发.北京:中国铁道出版社,2008.
【2】熊瑞英,王宁.响应式Web设计.科技创新导报,2008(26):64-65.
【3】危华明,陈积常,汪小威.基于HTML5+CSS3.0的响应式网站前端设计与实现.福建电脑,2008(5):15,31。

【4】曾祥利,柴炜嘉.响应式布局中栅格系统和弹性盒子的比拟.产业与科技论坛,2008(20):62,64.
【5】吴永娜,杨春旭,许佳南.基于html5+css3的网页自适应布局设计.电脑知识与技术,2008(28):242,244.。