一篇文章带你搞懂流式布局

PC端进行网页制作时，经常使用固定像素并且内容居中的网页布局，为了适应小屏幕的设备，在移动设备和跨平台(响应式)网页开发过程中，多数使用流式布局，下面我们就对流式布局进行详细介绍。

流式布局是一种等比例缩放布局方式，在CSS代码中使用百分比来设置宽度，也称百分比自适应的布局。流式布局实现方法是将CSS固定像素宽度换算为百分比宽度。换算公式如下: 目标元素宽度/父盒子宽度=百分数宽度下面通过一个案例来演示固定布局如何转换为百分比布局，如demo4-1.html 所示。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>固定布局转换为百分比布局</title>
	<style type="text/css">
		body>*{ width: 980px; height:auto; margin:0 auto;
				margin-top:10px;
				border:1px solid #000; padding:5px;}
		header{ height:50px;}
		section{ height: 300px;}
		footer{ height:30px;}
		section>*{ height:100%; border:1px solid #000; float:left;}
		aside{ width:250px;}
		article{ width:700px; margin-left:10px;}
	</style>

</head>
<body>
<header>header</header>
<nav>nav</nav>
<section>
	<aside>aside</aside>
	<article>article</article>
</section>
<footer> footer</footer>
</body>
</html>

打开Chrome浏览器访问demo4-1.html，页面效果如下图所示。

可以尝试改变浏览器窗口的大小，页面元素的大小不会随浏览器窗口改变，如下图所示。

下面修改demo4-1样式代码，将所有宽度修改为百分比的形式，具体如下:

	<style type="text/css">
		body>*{ width:95%; height:auto; margin:0 auto; margin-top:10px;
               border:1px solid #000; padding :5px; }
		header{ height:50px; }
		section{ height: 300px; }
		footer{ height:30px;}
		section>*{ height:100%; border:1px solid #000; float:left; }
		aside{ width:25.510204%; /*250÷980*/}
		article{ width: 71.428571%; /*700÷980*/margin-left:1.0204088%;}
	</style>

刷新页面，缩小浏览器，页面按百分比随浏览器逐渐缩小，显示完整，页面效果如下图所示：

式布局

布局特征:

高度写死，宽度自适应。并不是百分百还原设计图

比如：设计图是针对320px屏幕设计的，那么只有在320设备的屏幕中，才是完美的效果，其他情况都会拉伸

小图片、小图标、文字大小一般写死

大图片一般宽度自适应，高度等比例缩放(例如:轮播图)

经典的流式布局：

左侧固定，右侧自适应

方法有很多种,简单例举3种。

一、左侧固定右侧自适应-定位

步骤:

1、左侧宽度写死——》定位——》给父元素设置左padding即可

2、右侧宽度不用设置（自适应）

二、浮动+触发BFC

拓展：想详细了解BFC戳这里

overflow:hidden 会触发盒子的BFC

触发BFC的盒子的特点：

解决margin的塌陷
清除浮动
不会在浮动元素下面，会被挤到一边去

步骤:

1、左侧宽度固定——》左浮动

2、右侧宽度是自适应——》触发bfc——》overflow：hidden

三、display:flex

(对flex布局不太了解的朋友可以去看看我的另一篇关于flex布局的博客)flex布局(弹性布局、伸缩布局)

步骤:

给父盒子设置为弹性盒子
左侧宽度写死
右侧宽度按照份数分配父元素主轴（宽度）的剩余空间

右侧固定，左侧自适应

注意:在右侧固定，左侧自适应的布局中如果要使用浮动+触发BFC的方法,在html结构中需要先写右边的盒子!!!

原因:浮动元素受到上面元素边界的影响,导致盒子上不去

两侧固定，中间自适应（圣杯布局、双飞翼布局）

注意:同样在两侧固定，中间自适应（圣杯布局、双飞翼布局）中如果要使用浮动+触发BFC的方法,在html结构中需要先写左边的盒子,在写右边盒子,中间盒子最后写

原因:浮动元素受到上面元素边界的影响,导致盒子上不去

等分布局

按照宽度百分比可以完成，但是当给每一个盒子设置border之后，会发现盒子掉下来了

只要进行移动端布局，盒子约定俗成都需要加上自动内减。

2013年底，切图网接到了第一个响应式布局的网站项目，当时要做响应式布局的网站并不多，项目是台湾的一个客户的，可能是台湾的没有墙的原因吧，可以很容易访问国外很多优秀设计的网站。

当时对响应式做了一些思考，连着这两三年又接手了更多的响应式布局开发项目，总结了自己的一些感悟，想分享出来。

为什么说网页由简单到复杂在回归简单

很多事情即使如此，网页的变迁似乎也遵循了这一条规律，何为响应式布局？最直观的感受，就是当我们拉伸浏览器宽度的时候，网页的内容会发生变化，在现在，这个是要通过css3 media query多媒体查询技术来实现的。

其实，当我们建立一个网页，随便打几行字，插入几个标签，它本身就是一个响应式网页，所以响应式布局的网页，尽可能设计的简单，不要有复杂的结构，这种情况作出的响应式标准效果又好的。

响应式网站就要做流式布局吗？

流式布局就是采用100%宽度来排版网页，这样它是可以自适应不同屏幕宽度的，但是，实际情况是现在网页越来越复杂，结构越来越多样，单单靠100%宽度是解决不了所有问题的。

最终该定宽的还是得定宽，该定高的也得定高，所以，响应式网站并不是采用100%的流式布局，甚至两者没有直接联系。

响应式布局新方法（经过本人大项目项目佐证可行）, 先看看几个案例

流式布局响应式

http://www.qietu.com/html/f1/imirror/

http://www2.qietu.com/html/yinshua/

http://www2.qietu.com/html/ruijiahang/

定宽方式的响应式

http://www4.qietu.com/html/dechi/

http://www.qietu.com/html/qingkonglianyu/

目前很多项目响应式网页都是采用的下面这行定义

而本人在切图网公司大量的项目中采用了另外一种方法

然后响应式代码这样写

body{

width:480px; margin:0 auto; overflow:hidden;

}

......

然后再去调整里面元素的细节样式，让它在手机下更好阅读。这是一个很好的方法，并且做出的网页在手机下效果很好。因为它的宽度是固定的，是可控的，编码时候效果是可以直观看到的。

相比于第一种方法，它的宽度很不明确，需要周全的考虑每个宽度下网页每个元素的情况，这不仅需要大量的代码，而且实际情况是很难考虑的那么周全，响应后的效果不好。

定宽的方法我相信有部分人知道，但是没有人敢真正用于在实际项目中，担心它有bug，以及有bug没有解决方案，都随波逐流用了第一种方法，我想说，本着探究的精神，我把这种方法用在大量项目中得到佐证，可行，也遇到过bug不过都解决了。

当然，响应式后的手机端效果不如单独设计手机端，如果客户对效果要求比较高，我通常会建议单独做一个pc版和webapp触屏版，例如像这样

http://www.qietu.com/html/f1/jifuguanjia/

http://www4.qietu.com/html/jifu_wap/

响应式web布局算还是比较新的技术，还有很多待研究的地方，需要我们一起探讨，欢迎加入一起讨论。本人qq/微信：6135833

文/丁向明

做一个有博客的web前端自媒体人！

http://dingxiangming.com

在线咨询

上一篇：从实际出发，普通用户眼中的Surface Pro 3
下一篇：HTML5又迎元年影游联动也许能救？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。