固定布局、流体布局、弹性布局和响应式布局有什么区别

Question

您能详细说明一下两者之间的区别吗

固定布局、流体布局、弹性布局、响应式布局

Answer 1

我会尝试解释这本书“响应式网页设计 - A. Ertel，K. Laborenz - 伽利略计算”

固定布局

尺寸以像素表示的布局，因此无法适应不同的屏幕尺寸或分辨率。如果屏幕太小，则会显示滚动条。

---

流体和弹性布局

流体布局是在视口的百分比中定义的。当窗口大小改变时，布局的尺寸也会相应改变。文本和图片保持其大小。

弹性布局是固定布局和流动布局的混合形式。元素宽度以 em 表示，这取决于字体大小。因此，当窗口大小改变时布局不会改变，而是当字体大小改变时布局改变。原则上，这是大多数浏览器通过页面缩放（CTRL + 鼠标滚轮）提供的行为。

---

自适应布局

自适应布局原则上是一个固定版本，存在多个版本。根据可用的屏幕尺寸，它会“跳转”这些版本。在断点之间，它表现为固定布局。

响应式布局

响应式布局结合了流体布局和自适应布局的属性。它在“断点”上发生很大变化，此外它还像这些断点之间的流体布局一样延伸。它还允许内容缩放，即图片适应可用空间。

Answer 2

流畅、弹性和响应式布局都是相同的...

Only Fixed Layout 是一种将页面宽度固定为给定尺寸的布局，例如以像素为单位....

流体布局的宽度为 100%，其元素通过屏幕分辨率排列...

响应式意味着网页元素通过屏幕分辨率排列...

看看这个液体样本：-

1. 流体样品
2. 反应灵敏

参考：- Twitter Bootstrap