可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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?

回答1:

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

Scales with screen size, therefore get to use more space if it's available.

Cons

Makes it more difficult to know the exact position of something on screen. As a result, it can make creating precise layouts more difficult.
Can lead to unexpected layouts if child elements are fixed width (i.e. an image) and end up being larger than their fluid width parent.

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

Always know an element's exact size.
Creating precise layout is easier.

Cons

You don't scale with resolutions. Your layout will always be the same width, making for wasted space when people have high resolutions.

回答2:

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.

回答3:

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)

回答4:

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.