固定布局与流体布局与弹性布局与响应式布局有什么区别答案

【问题标题】：What is the differenence between Fixed vs. Fluid vs. Elastic Layout vs Responsive layouts固定布局与流体布局与弹性布局与响应式布局有什么区别
【发布时间】：2015-09-21 23:05:14
【问题描述】：

你能详细说明两者的区别吗

固定布局 vs. 流动布局 vs. 弹性布局 vs. 响应式布局

【问题讨论】：

标签： html css layout css-float fluid-layout

【解决方案1】：

我会试着解释一下这本书"Responsive Webdesign - A. Ertel, K. Laborenz - Galileo Computing"

固定布局

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

流动和弹性布局

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

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

自适应布局

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

响应式布局

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

【讨论】：

【解决方案2】：

流畅、弹性和响应式布局都是一样的...

只有 Fixed Layout 是您将页面宽度固定为给定大小的布局，例如以像素为单位......

Fluid Layout 的宽度为 100%，其元素通过屏幕分辨率排列...

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

看看这个流体样本：-

参考：-Twitter Bootstrap

【讨论】：

你能详细说明流体和响应之间的区别吗？
它们远不一样！看我的回答！