整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

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

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布局(弹性布局、伸缩布局)

步骤:

  1. 给父盒子设置为弹性盒子
  2. 左侧宽度写死
  3. 右侧宽度按照份数分配父元素主轴(宽度)的剩余空间

右侧固定,左侧自适应

注意:在右侧固定,左侧自适应的布局中如果要使用浮动+触发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/

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

<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1, user-scalable=yes">

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

<meta name="viewport" content="width=480">

然后响应式代码这样写

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


上一篇:JSP include指令
下一篇:HTML基础的用法