Web布局:像素与百分比

Question

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

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

Answer 1

百分比布局

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

使用百分比布局时,最好在设计上指定最小宽度和最大宽度,以便在极低和高分辨率下保持可用.

优点

1. 具有屏幕尺寸的刻度,因此如果可用则可以使用更多空间.

缺点

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

像素布局

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

优点

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

缺点

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