一、流式布局
流式布局的特点是页面元素的宽度按照屏幕分辨率进行适配调整,但整体布局不变。网页中主要的划分区域的尺寸使用百分数,例如,设置网页主体的宽度为80%,min-width为960px。
布局特点:屏幕分辨率变化时,页面里元素的大小会变化而但布局不变。
设计方法:使用百分比定义宽度,高度大都是用px来固定住,可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整,尽可能的适应各种分辨率。往往配合 max-width/min-width 等属性控制尺寸流动范围以免过大或者过小影响阅读。
二、固定布局
在固定布局中,网页的宽度是必须指定为一个像素值,一般为960px。过去,开发人员发现960px是最适合作为网格布局的宽度,在今天,在web开发中还是比较普遍使用固定宽度布局的,因为这种布局具有很强的稳定性与可控性。但是同时也有一些劣势,固定宽度必须考虑网站是否可以适用于不同的屏幕宽度。
三、弹性布局
弹性布局跟流式布局很像,主要不同是大小单位。弹性布局的大小单位不是像素或者百分比,而是em或者rem,避免了根据px局部在高分辨率下几乎无法辨识的缺点,又相对于百分比更加灵活,同时可以支持浏览器的字体大小调整和缩放等的正常显示,需要一段时间适应而且不易从其他布局转换过来。
四、自适应布局
自适应布局的特点是分别为不同的屏幕分辨率定义布局,即创建多个静态布局,每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部(页面元素位置发生改变),但在每个静态布局中,页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。