流式布局,也叫百分比布局,是移动端开发中经常使用的布局方式之一。流式布局在CSS2时代就有,主要是靠百分比进行排版,可以在不同分辨率下显示相同的版式。
流式布局:网页中主要的划分区域的尺寸使用百分数(搭配min-*、max-*属性使用),例如,设置网页主体的宽度为80%,min-width为960px。图片也作类似处理(width:100%, max-width一般设定为图片本身的尺寸,防止被拉伸而失真)。
这种布局方式在Web前端开发的早期历史上,用来应对不同尺寸的PC屏幕(那是屏幕尺寸的差异不会太大),在当今的移动端开发也是常用布局方式,但缺点明显:宽度使用百分比定义,但是高度和文字大小等大都是用px来固定,所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长,但是高度、文字大小还是和原来一样(即,这些东西无法变得“流式”),显示非常不协调。
流式布局的特征:宽度自适应,高度写死,并不是百分百还原设计图。
图标都是固定死大小的,包括字体等也是固定死的。并不是所有的东西都是自适应的。
一些大的图片,设置宽度为百分比自适应即可,随着屏幕大小进行变化,对于小图标或者文本等, 一般都是定死宽高大小。
更多web前端开发知识,请查阅 HTML中文网 !!