Web布局：像素与百分比

Question

在网页布局中为像素和百分比定义距离有哪些用例？

在多种分辨率下使用像素是否有任何缺点？它们会正确缩放吗？

Answer 1

百分比布局

这通常被称为流体布局。您的元素将占用可用空间的已定义百分比。此可用空间由元素的父级确定。

使用百分比布局时，最好在设计中指定min-width和max-width，以便在极低和高分辨率下仍可使用。

<强>赞成

1. 根据屏幕尺寸进行缩放，因此如果可用，则可以使用更多空间。

<强>缺点

1. 让您更难以了解屏幕上某些内容的确切位置。因此，它可以使创建精确的布局变得更加困难。
2. 如果子元素是固定宽度（即图像）并且最终大于其流体宽度父级，则可能导致意外布局。

像素布局

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

<强>赞成

1. 始终知道元素的确切大小。
2. 创建精确的布局更容易。

<强>缺点

1. 您无法使用分辨率进行缩放。您的布局将始终具有相同的宽度，从而在人们具有高分辨率时浪费空间。

Answer 2

我会通过告诉你一个真实的故事回复这个。

我们有一个客户想要一个由div组成的地图视图。

突然，他决定要缩放。

我必须将所有细粒度像素位置更改为百分比。

使包装div相对改变宽度/高度（以像素为单位），我们得到了一个漂亮而合理的缩放效果。

NB：在设计阶段，我很快就制作了一个原型，我会为你查找...

编辑：没有，没有找到，抱歉。

Answer 3

对于百分比，你必须有一个基值，所以它就像一个大小设置在CSS之外的图像，如果你只是在DIV上使用一个百分比，例如，它就没有任何东西例如，除了实际大小之外，它是基于它填充文本，因此使用百分比作为调整大小的方法是不切实际的，因为它很少产生所需的输出，如果你重新调整像素大小的内容，例如使用javascript，您可以调整大小来调整原始值（以像素为单位）

Answer 4

他们做不同的事情。

像素值始终与输出设备上的假设像素相关。 百分比值与包含块的计算大小（对于块元素）或包含块的字体大小（对于字体大小）有关。 Em和pt值与当前字体大小有关。

如果您希望您的商品与其容器一起扩展，请使用百分比。如果您希望它与字体大小一起缩放，请使用ems。如果您不想让它完全缩放，请使用像素。

然后是IE6;谁在那个东西'实现'CSS显然不知道各种CSS属性应该做什么。

Answer 5

小心使用百分比，webkit浏览器不能正确计算百分比。这都是因为webkit不能正确计算子像素。

有关此问题的详细信息，请参阅此处：Percentage bugs in webkit

我建议您始终使用像素，使浏览器之间没有任何布局尺寸差异。