pixel - 网页布局 : pixels vs percentages

Question

在 Web 布局中为像素和百分比定义距离的用例是什么？

在多个分辨率方面使用像素有什么缺点吗？它们会正确缩放吗？

Answer 1

百分比布局

这通常称为流体布局。您的元素将占用它们可用总空间的定义百分比。这个可用空间由元素的父元素决定。

使用百分比布局时，在您的设计中指定 min-width 和 max-width 是一个好主意，以便它在非常低和非常高的分辨率下仍然可用。

优点

随屏幕尺寸缩放，因此可以使用更多空间(如果可用)。

缺点

使知道屏幕上某物的确切位置变得更加困难。因此，它会使创建精确布局变得更加困难。

如果子元素是固定宽度(即图像)并且最终大于它们的流体宽度父元素，则可能导致意外布局。

像素布局

这通常称为固定布局。您的元素将始终具有相同的定义像素大小，并且不会考虑可用的父空间。

优点

始终知道元素的确切大小。

创建精确的布局更容易。

缺点

您不会随着分辨率进行缩放。您的布局将始终具有相同的宽度，当人们使用高分辨率时会浪费空间。