【发布时间】：2011-04-07 12:43:38
【问题描述】：
在 Web 布局中为像素和百分比定义距离的用例有哪些？
在多种分辨率下使用像素有什么缺点吗？它们会正确扩展吗？
【问题讨论】：
-
熊会吃掉你——尽管我想像你一样抨击这个家伙，但他的问题与字体有很大不同。一个影响可读性，另一个影响一般查看，直至不同的 UI。
标签： pixel
【发布时间】：2011-04-07 12:43:38
【问题描述】：
百分比布局
这通常被称为流体布局。您的元素将占用它们可用的总空间的定义百分比。这个可用空间由元素的父元素决定。
在使用百分比布局时，最好在您的设计中指定 min-width 和 max-width，以便它在非常低和高分辨率下仍然可用。
优点
- 随屏幕大小缩放，因此如果可用，可以使用更多空间。
缺点
- 使了解屏幕上某些内容的确切位置变得更加困难。因此，它会使创建精确布局变得更加困难。
- 如果子元素是固定宽度（即图像）并且最终大于其流体宽度的父元素，可能会导致意外的布局。
像素布局
这通常称为固定布局。您的元素将始终具有相同的定义像素大小，并且不会考虑可用的父空间。
优点
- 始终了解元素的确切大小。
- 创建精确的布局更容易。
缺点
- 您不会随分辨率缩放。您的布局将始终具有相同的宽度，当人们拥有高分辨率时会浪费空间。
【讨论】：
我会告诉你一个真实的故事。
我们有一个客户想要一个由 div 组成的地图视图。
突然间，他决定他也想要缩放。
我必须将所有这些细粒度的像素位置更改为百分比。
使包裹的 div 相对改变宽度/高度（以像素为单位），我们得到了一个不错且合理的缩放效果。
注意：在设计阶段，我很快就画了一个原型，我去给你看看……
编辑：不，没有找到，抱歉。
【讨论】：
-
您可以只制作一个服务器端脚本，该脚本将预先调整大小并发送一堆不同大小的不同 css 文件，并让 javascript 在这些文件中循环，我为类似的项目做了这样的事情我想调整大小但不想让 javascript 完成所有工作，因为它可能有问题。
-
让浏览器进行单独计算实际上比服务器更快，特别是考虑到有时浏览器知道需要调整大小而服务器不知道（=浪费资源）。
-
不不，PERCENTAGES 的重点是造成缩放效果！唯一的 JavaScript 部分是调整主包装 div 的大小！
对于百分比，你必须有一个基值，所以它就像一个在 CSS 之外设置大小的图像，例如，如果你只在 DIV 上使用百分比，它不会有任何东西例如，除了通过填充文本来确定它的实际大小之外，使用百分比作为调整大小的方法是不切实际的，因为它很少会产生所需的输出，如果你重新使用像素大小调整大小，例如使用 javascript，您可以按百分比调整大小，以调整原始值的大小（以像素为单位）
【讨论】：
他们做不同的事情。
像素值始终与输出设备上的假设像素相关。 百分比值与包含块的计算大小（对于块元素）或包含块的字体大小（对于字体大小）相关。 Em 和 pt 值与当前字体大小有关。
如果您希望您的项目与其容器一起缩放，请使用百分比。如果您希望它随字体大小缩放，请使用 ems。如果您根本不希望它缩放，请使用像素。
然后是 IE6；在那件事中“实现” CSS 的人显然不知道各种 CSS 属性应该做什么。
【讨论】：
小心使用百分比，webkit 浏览器不能正确计算百分比。这都是因为 webkit 没有正确计算亚像素。
关于这个问题的详细信息可以在这里阅读：Percentage bugs in webkit
我建议您始终使用像素，以免浏览器之间存在任何布局尺寸差异。
【讨论】：