一、静态布局(static layout)
居中布局,所有样式使用绝对宽度/高度(px),当屏幕大小改变时,页面布局不会发生变化。
优点:布局方式是最简单的,且没有兼容性问题。
缺点:不能根据用户的屏幕尺寸做出不同的表现。
二、流式布局(Liquid Layout)
使用%百分比定义宽度,高度大都是用px来固定住。屏幕分辨率变化时,页面里元素的大小会变化而但布局不变。
缺点:如果屏幕尺度跨度太大,显示非常不协调。
三、自适应布局
自适应布局的特点是分别为不同的屏幕分辨率定义布局,即创建多个静态布局,每个静态布局对应一个屏幕分辨率范围。改变屏幕分辨率可以切换不同的静态局部(页面元素位置发生改变),但在每个静态布局中,页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。
四、响应式布局(Responsive Layout)
页面元素宽度随着窗口调整而自动适配。即:创建多个流体式布局,分别对应一个屏幕分辨率范围。可以把响应式布局看作是流式布局和自适应布局设计理念的融合。每个屏幕分辨率下面会有一个布局样式,即元素位置和大小都会变。
优点:适应pc和移动端,如果足够耐心,效果完美。
缺点:(1)媒体查询是有限的,也就是可以枚举出来的,只能适应主流的宽高。(2)要匹配足够多的屏幕大小,工作量不小,设计也需要多个版本。
五、弹性布局(rem/em布局)
1. rem/em区别:rem是相对于html元素的font-size大小而言的,而em是相对于其父元素。
2. 使用 em 或 rem 单位进行相对布局,相对%百分比更加灵活,同时可以支持浏览器的字体大小调整和缩放等的正常显示,因为em是相对父级元素的原因没有得到推广。
3. 这类布局的特点是,包裹文字的各元素的尺寸采用em/rem做单位,而页面的主要划分区域的尺寸仍使用百分数或px做单位(同「流式布局」或「静态/固定布局」)。早期浏览器不支持整个页面按比例缩放,仅支持网页内文字尺寸的放大,这种情况下。使用em/rem做单位,可以使包裹文字的元素随着文字的缩放而缩放。
4. 浏览器的默认字体高度一般为16px
,即1em:16px,但是 1:16 的比例不方便计算,为了使单位em/rem更直观,CSS编写者常常将页面跟节点字体设为62.5%,比如选择用rem控制字体时,先需要设置根节点html的字体大小,因为浏览器默认字体大小16px*62.5%=10px。这样1rem便是10px,方便了计算。
5. 用em/rem定义尺寸的另一个好处是更能适应缩进/以字体单位padding或margin/浏览器设置字体尺寸等情况(因为em/rem相对于字体大小,会同步改变)。例如:p{ text-indent: 2em; }。
6. 使用rem单位的弹性布局在移动端也很受欢迎。
7. 其实在移动端使用所谓的弹性布局,是比较勉强的。移动端弹性布局流行起来的原因归根结底是rem单位对于(根据屏幕尺寸)调整页面的各元素的尺寸、文字大小时比较好用。