网页布局：像素与百分比
在网页布局中定义像素和百分比距离的用例有哪些？
使用多个分辨率的像素有什么缺点吗？它们会正确缩放吗？
What are the use cases for defining distances in a web layout for pixels and percentages?
Is there any downside to using pixels with respect to multiple resolutions? Will they scale correctly?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
百分比布局
这通常称为流体布局。您的元素将占用可用总空间的指定百分比。该可用空间由元素的父元素决定。
使用百分比布局时，最好指定 min-width 和 < a href="http://www.w3schools.com/CSS/pr_dim_max-width.asp" rel="noreferrer">max-width 在您的设计上，以便它在非常低和高分辨率下仍然可用。
优点
缺点
像素布局
这通常称为固定布局。您的元素将始终具有相同的定义像素大小，并且不会考虑可用的父空间。
优点
缺点
Percentage layout
This is generally referred to as fluid layout. Your elements will take a defined percentage of the total space available to them. This available space is determined by the element's parent.
When using percentage layouts, it's a good idea to specify a min-width and max-width on your design so that it remains usable at very low and high resolutions.
Pros
Cons
Pixel layout
This is usually known as fixed layout. Your element will always be the same defined pixel size and will not take available parent space into account.
Pros
Cons
我将通过告诉你一个真实的故事来回答这个问题。
我们有一个客户想要一个由 div 组成的地图视图。
突然，他决定也想要变焦。
我必须将所有这些细粒度的像素位置更改为百分比。
通过使包裹 div 相对改变宽度/高度（以像素为单位），我们得到了良好且合理的缩放效果。
注意：在设计阶段，我很快画了一个原型，我会帮你查找一下...
编辑：没有，什么也没找到，抱歉。
I'll reply to this one by telling you a true story.
We had a client which wanted a map view, made up of divs.
Suddenly, he decided he wanted zooming as well.
I had to change all those fine-grained pixel positions to percentages.
Causing the wrapping div to change width/height (in pixels) relatively, we got a nice and reasonable zooming effect.
NB: During design phase, I quickly drew up a prototype, I'm going to look it up for you...
Edit: Nope, nothing found, sorry.
对于百分比，您必须有一个基值，因此它就像在 CSS 之外设置了大小的图像，例如，如果您仅在 DIV 上使用百分比，则它不会有任何基础值例如，除了实际大小之外，它是通过填充文本来确定的，因此使用百分比作为调整大小的方法是不切实际的，因为如果您要重新调整某些内容的大小，它很少会产生所需的输出像素大小，例如通过使用 javascript，您可以按百分比调整大小，从而调整原始值的大小（以像素为单位）
For percentages you have to have a base value, so it would be something like an image that has a size set outside of the CSS, if you just use a percentage on a DIV, for example, it wouldn't have anything to base that off of except the actual size it was by its being filled with text, for example, so it would not be practical to use percentages as a way to size it as it would rarely produce the desired output, if you are re-sizing something with a pixel size, such as by using javascript, you could resize by a percentage that would resize the original value (in pixels)
他们做不同的事情。
像素值始终与输出设备上的假设像素相关。
百分比值与包含块（对于块元素）的计算大小或包含块的字体大小（对于字体大小）相关。
Em 和 pt 值与当前字体大小相关。
如果您希望项目与其容器一起缩放，请使用百分比。如果您希望它随字体大小缩放，请使用 em。如果您根本不希望它缩放，请使用像素。
然后是IE6；无论是谁在那个东西中“实现”CSS，显然都不知道各种 CSS 属性应该做什么。
They do different things.
Pixel values always relate to hypothetical pixels on the output device.
Percent values relate to the computed size of the containing block (for block elements) or the containing block's font size (for font sizes).
Em and pt values relate to the current font size.
If you want your item to scale with its container, use percentages. If you want it to scale with font size, use ems. If you don't want it to scale at all, use pixels.
And then there's IE6; whoever 'implemented' CSS in that thing obviously had no idea what the various CSS properties were supposed to do.
使用百分比时要小心，webkit 浏览器无法正确计算百分比。这都是因为 webkit 没有正确计算子像素。
有关此问题的详细信息可以在此处阅读：Webkit 中的错误百分比
建议您始终使用像素，以免浏览器之间存在任何布局尺寸差异。
Be careful using percentages, webkit browsers don't calculate percentages correctly. It's all because webkit doesn't calculate subpixels correct.
Detailed information about this issue can be read here: Percentage bugs in webkit
I would recommend you to always use pixels to don't have any layout dimensions differences between browsers.